先上个图
上图阐明
- 看起来是表格包罗了很多个表单，着实是表单包罗了表格；
- 表头是通过插槽自界说的，也可以直接使用表格的 label 属性；
- 外层是一个大表格，内里是一个小表格，然后小表格的每一列是根据大表格的主表列里的选项差别，数据差别自动循环出来的，有的是必填，有的是非必填，截图上都是必填；
- 小表格可以举行法态添加数据，小表格跟大表格是两个表单，而且分开校验；
element 表单校验明白
- el-form 组件中的 model 属性，即绑定校验的外层对象，我们都知道对象里第一层数据的校验，而这个对象内里可能另有对象、数组什么的，怎么去校验被层层包裹住的数据呢，这就是表格校验要过的第一个关卡；
- el-form 组件中的 rules 属性，对数据的校验规则对象，它通过 el-form-item 的 prop 属性去找该字段匹配 rules 属性绑定对象的哪一个字段，嵌套层级的话，可以通过 prop 属性提现出来，但是假如嵌套比较烦，我们对 rules 对象的誊写有比较麻烦，el-form-item 组件中 也有一个 rules 属性，可以直接通报该字段的校验数组，清楚明白；
- 此处即用到了表格单行校验，也用到了全表格校验，全表格校验和正常的表单校验一样，但是单行校验就相对复杂了；
- 此处另有一个表格的睁开行的坑，就是当我们要默认睁开行大概要根据需求去做一些特别的表格睁开的时间，el-table 组件的 row-key 属性肯定要在数据中是字符串范例的，否则不会出效果；
上代码
标签部门
<!-- iq 是自界说的，放到对象里时，肯定要转成字符串 --> <el-button @click="iq=iq+1,tableForm.tableData.unshift({iq:iq.toString(),manageCom:'',gradeCode:[],isEdit: true,list:[],add:1})" :loading="isLoading" type="primary">新增设置 </el-button> <el-form :model="tableForm" ref="tableForm" size="small"> <el-table :data="tableForm.tableData" ref="tableData" v-loading="isLoading" @expand-change="expandChange" :expand-row-keys="expandRowKeys" row-key="iq"> <el-table-column type="expand"> <template slot-scope="props"> <!-- 给每一个小表格动态赋值 ref 属性 --> <el-form v-if="props.row.asalaryCode" :model="tableForm.tableData[props.$index]" :ref="`tableForm${props.$index}`" size="mini"> <el-table :data="props.row.list" border default-expand-all> <div v-for="(col, index) in salaryArr" :key="index"> <!-- 由于是根据 asalaryCode 字段来天生小表格的，所以得先判断 --> <div v-if="col.value == props.row.asalaryCode"> <!-- 循环天生小表格表头 :fixed="indexF == 0" 不知为什么在渲染的时间 次序不对，就加了这段 --> <el-table-column v-for="(fileByte, indexF) in col.fileBytes" :key="indexF" align="center" :fixed="indexF == 0"> <!-- 自界说表头部 --> <template slot="header"> <span> <span v-if="!fileByte.notRequired" style="color: red; font-size: 16px">*</span>子表列{{indexF++}} </span> </template> <template slot-scope="scope"> <!-- prop 属性是组件用来找到指定校验数据的关键，此处比较暗昧，放在下面表明 --> <el-form-item :prop="`list.${scope.$index}.${fileByte.model}`" :rules="rules[fileByte.rule || fileByte.model]" style="margin-top:18px"> <el-select v-if="fileByte.type == 'select'" v-model="scope.row[fileByte.model]" :disabled="!props.row.isEdit" placeholder="请选择" filterablemoment.js 获取 昨天、本日、上周、本周、上月、本月、上季度、本季度、客岁 时间段，并集成到 vue Ant Design a-range-picker 日期选择器中vue Ant Design Select 选择框输入搜刮已有数据 mixin
vue + Ant Design 表格多选 mixin
element-ui Upload 自界说上传 loading
vue 中父子组件通讯 js 引用的作用
Vue组件通讯—provide/inject
</ol> |
