<!--
* @Description: 动态表单的验证;表格的验证 usualElementStudy/dymicFrom.vue
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-07-20 10:43:20
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:36:53
-->
<!-- -->
<template>
<div class="dymic-from-content-box">
<h1>动态表单的校验</h1>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="demo-dynamic">
<el-form-item
v-for="(item,index) in dynamicValidateForm.formDataList"
:label="'课程名称：' + item.title"
:key="item.id"
:prop="`formDataList.${index}.name`"
:rules="{
required: true, message: `${item.title}课程名称不能为空`, trigger: ['blur','change']
}"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<h1>表格校验</h1>
<el-form :model="tableForm" ref="tableForm">
<el-table :data="tableForm.tableData" border style=" 100%">
<el-table-column label="姓名">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.name`" :rules="tableRules.name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<el-form-item :prop="`tableData.${scope.$index}.age`" :rules="tableRules.age">
<el-input v-model="scope.row.age"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
<el-form-item>
<el-button type="primary" @click="submitForm('tableForm')">提交</el-button>
<el-button @click="resetForm('tableForm')">重置</el-button>
</el-form-item>
</el-form>
<h1>限制输入条件性的输入</h1>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item>
<el-input
v-model="form.vaule1"
oninput="value=value.replace(/[^d]/g, '')"
placeholder="只能输入数字"
></el-input>
<el-input
v-model="form.vaule2"
oninput="value=value.replace(/[^0-9.]/g, '')"
placeholder="只能输入数字和小数"
></el-input>
<el-input
v-model="form.vaule3"
oninput="value=value.replace(/[^d.]/g, '')"
placeholder="只能输入数字和小数"
></el-input>
</el-form-item>
</el-form>
<h1>vue-pdf插件pdf预览效果</h1>
<div>
<div class="pdf">
<div class="pdf-tab">
<!-- 页签展示 -->
<div
:class="['btn-def',{'btn-active':activeIndex==index}]"
v-for="(item,index) in pdfList"
:key="index"
@click.stop="pdfClick(item.pdfUrl,index)"
>{{item.title}}</div>
</div>
<pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i"></pdf>
</div>
</div>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
components: {
pdf
},
data() {
//这里存放数据
return {
pdfList: [
{
pdfUrl: "http://file.gp58.com/file/2018-11-14/111405.pdf",
title: "中信证券观点"
},
{
pdfUrl:
"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf",
title: "12月投资月刊"
}
],
pdfUrl: "",
numPages: 1,
activeIndex: 0,
form: {
vaule1: "",
vaule2: "",
vaule3: "",
vaule4: ""
},
dynamicValidateForm: {
formDataList: [
{ id: 1, title: "vue", name: "" },
{ id: 2, title: "react", name: "" },
{ id: 3, title: "angluar", name: "" },
{ id: 4, title: "node", name: "" }
]
},
tableForm: {
tableData: [
{
name: "",
age: ""
}
]
},
tableRules: {
// 姓名
name: [
{
required: true,
message: "请输入姓名",
trigger: ["blur", "change"]
},
{
max: 20,
message: "长度在20个字符以内",
trigger: ["blur", "change"]
}
],
//年龄
age: [
{
required: true,
message: "请输入年龄",
trigger: ["blur", "change"]
},
{
max: 20,
message: "长度在20个字符以内",
trigger: ["blur", "change"]
}
]
}
};
},
methods: {
pdfTask(pdfUrl) {
let self = this;
let loadingTask = pdf.createLoadingTask(pdfUrl);
// console.log(loadingTask,'loadingTask')
// return
loadingTask.promise
.then(pdf => {
self.pdfUrl = loadingTask;
self.numPages = pdf.numPages;
})
.catch(err => {
console.error("pdf加载失败");
});
},
// 点击tab时候
pdfClick(pdfUrl, index) {
if (index == this.activeIndex) return;
this.activeIndex = index;
this.pdfUrl = null;
this.pdfTask(pdfUrl);
},
// 校验表单
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
// 重置表单
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
// console.log("表单的处理");
let a = Object(new Array(5))
// console.log(a,'a',typeof(a))
let b = new Array(5)
// console.log(b,'b',typeof(b))
},
mounted() {
this.pdfTask(this.pdfList[0].pdfUrl);
}
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
<!--
* @Description: element ui表格的常规用法 usualElementStudy/elementTable.vue
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-05 10:43:26
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:37:05
-->
<template>
<div class="element-table-box">
<div class="search-box">
<el-input v-model="searchName" placeholder="请输入岗位" clearable style="max- 200px"></el-input>
<el-button
type="primary"
class="serach-btn"
icon="el-icon-search"
@click="searchData"
style="max- 200px; margin-left: 10px;"
>查询</el-button>
</div>
<el-table
class="mt10"
:data="pageData.tableData"
:height="tableHeight"
ref="multipleTable"
style=" 100%"
:row-key="row => row.id"
@selection-change="handleSelect"
border
tooltip-effect="dark"
:row-style="{height:'32px'}"
:header-row-style="{height:'32px'}"
:cell-style="{padding:'2px'}"
v-loading="loading"
element-loading-text="表格数据加载中..."
>
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
<el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
<el-table-column prop="roleName" :label="'岗位名称
（角色）'" align="center"></el-table-column>
<el-table-column prop="creator" label="创建者" align="center"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="moveUp(scope.$index, pageData.tableData)">上移</el-button>
<el-button type="text" size="small" @click="moveDown(scope.$index, pageData.tableData)">下移</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
></el-pagination>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
//这里存放数据
return {
loading: false,
searchName: "",
pageData: {
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
},
};
},
computed: {
...mapState({
tableHeight: (state) => state.commonInfo.contentBoxHeight - 180,
}),
},
created() {
this.getPageList();
},
mounted(){
console.log('组件里面的钩子--mounted后')
},
methods: {
// pageSize
handleSizeChange(pageSize) {
// console.log(`每页 ${pageSize} 条`);
this.pageData.pageSize = pageSize;
this.getPageList(1, pageSize);
},
// 当前页
handleCurrentChange(currentPage) {
// console.log(`当前页: ${currentPage}`);
this.getPageList(currentPage);
},
// 查询
searchData() {
this.getPageList(1);
},
// 列表数据
getPageList( currentPage = this.pageData.currentPage, pageSize = this.pageData.pageSize ) {
this.pageData.currentPage = currentPage;
this.pageData.pageSize = pageSize;
const pageData = {
pageNo: currentPage,
pageSize: pageSize,
};
let data = {
roleName: this.searchName,
pageData: pageData,
}
this.loading = true;
this.$http.infoList.roleList(data).then((res) => {
if (res.returnResult === 200) {
// console.log(res, "res角色");
this.loading = false;
this.pageData.tableData = res.returnData.data || [];
this.pageData.total = res.returnData.recordCount;
}
})
},
// 跨页勾选
handleSelect(val){
console.log(val,'跨页选中数据')
},
// 编辑
handleEdit(row){
console.log(row)
this.$router.push({
name:'tableDetail',
query:{
id: row.id
}
})
}
},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.search-box {
display: flex;
margin-right: 10px;
}
</style>
<!--
* @Description: 详情 usualElementStudy/tableDetail.vue
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-07 10:15:04
* @LastEditors: lhl
* @LastEditTime: 2020-08-20 17:37:15
-->
<!-- -->
<template>
<div class="table-detail-content">详情界面</div>
</template>
<script>
import { browserType, URL, getQueryString } from '@/util/public'
export default {
components: {
},
data() {
//这里存放数据
return {};
},
created() {},
mounted() {
// alert(browserType())
// alert(URL.get('id'))
// alert(getQueryString('id'))
},
methods: {},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！