iview表格实现的编辑和expand功能

一：需求

1.需要实现主表格的expand和编辑功能
2.嵌套的子表格不是纯展示字段，需要对内容进行编辑
3.在主页提交表格数据时，需要同时保存主表格和子表格的数据，并且对所有的数据进行校验

二：expand功能的实现方式

1.实现表格的嵌套

1.新建一个ExpandTable.vue页面，作为嵌套的子表格
2.在Index.vue主页面中进行引用
3.render 方法中需要使用this.$createElement添加ref，而不能使用h，否则this.$refs将访问不到数据

{
    type: 'expand',
    width: 50,
    render: (h, params) => {
        return this.$createElement(ExpandTable, {
        	ref: `caseList${params.index}`,
            props: {
                scriptId: params.row.script, // 传参
            },
        })
    },
},
1
2
3
4
5
6
7
8
9
10
11
12

2.在主页中获取到子表格的数据
1.在ExpandTable.vue页面中传出：子表格的数据

// 传出数据给父组件
pushData () {
    return this.tableList
},
1
2
3
4

2.在Index.vue主页面中获取到子表格的数据，并且遍历主表格，把子表格的数据加入到主表格中

// 处理主、子表格的数据 
dealData () {
    const data = this.tableList.map((item, index) => {
        return {
            name: item.name, //主表格的字段
            childDatas: this.$refs[`caseList${index}`].pushData(), // 获取子表格的数据
        }
    })
},
1
2
3
4
5
6
7
8
9

3.手动处理：能否展开
1.禁用表格某一行的展开功能

this.tableList[index]._disableExpand = true
this.tableList[index]._expanded = false
1
2

2.启用表格某一行的展开功能

this.tableList[index]._disableExpand = false
this.tableList[index]._expanded = true
1
2

三：编辑的实现方式

1.需要修改的字段，使用插槽

1
2
3
4
5
6
7
8
9
10
11

2.将输入框的值放入 table 中

// 修改表格数据
setValue (value, index, KeyName) {
    this.tableList[index][KeyName] = value
},
1
2
3
4

3.对输入框中的值进行校验，如果不符，给输入框加入ivu-form-item-error的样式

// 校验输入框的值
checkValue (value) {
    if (!value) return true  //校验必填
},
1
2
3
4

4.在提交时，获取到页面中ivu-form-item-error的类名的长度

• 若为0，说明所有的数据都符合校验，可以调用接口进行提交；
• 若不为0，不进入接口调用的函数；
• 初始化时，需要使用nextTick进行校验

// 提交
handleSubmit () {
    this.isSubmit = true
    this.$nextTick(() => {
        const fillValid = !document.getElementsByClassName('ivu-form-item-error').length // 检测对象校验结构
        this.$refs.formData.validate(valid => {
            if (valid && fillValid) {
                this.addData() // 新增
            }
        })
    })
},
1
2
3
4
5
6
7
8
9
10
11
12

四：实现效果