用 iView 写一个动态表格

需求：写一个动态的表格，可以复制、删除、添加新的一行，效果图如下：

为什么是图片不是动画呢，因为我不会，哈哈哈哈

点击添加更多内容

 

 点击复制

 点击删除

 1、首先有个要注意的点，组件库用到的是 iView ，iView组件库的表格里嵌套其他的组件是用 render 函数渲染出来的，所以想要用表格嵌套一个表单，表单再去嵌套 select 和 input，去进行表单验证，再去向后端传递数据，是不可能的（如果可以当我没说，hhh）

2、所以，就改用了 template 模板的方法去渲染表格

<Table :columns="columns" :data="data" :show-header=false>
    <template slot-scope="{ row }" slot="effect">
        <Form ref="productForm" :model="row">
            <Form-item label="effect">
                // dict 是用 select 封装的数据字典组件
                <dict dict="ProductLine" v-model="row.effect" :transfer="true"/>
            </Form-item>
        </Form>
        </template>
    <template slot-scope="{ row }" slot="content">
        <Form ref="affectForm" :model="row">
            <Form-item label="content">
                <Input v-model='row.content' @on-change="onChange(row)"></Input>
            </Form-item>
        </Form>
    </template>
    <template slot-scope="{ index }" slot="btn">
        <Button type="primary" @click="copyTableRow(index)">复制</Button>
        <Button type="error" @click="delTableRow(index)">删除</Button>
    </template>
</Table>
<Button @click="addTableRow">+ 添加更多内容</Button>

// 列
columns: [
    {
        title: "序号",
        type: 'index',
        width: 30,
        align: 'center'
    },
    {
        title: "当前产品",
        key: "effect",
        width: 180,
        align: 'left',
        slot: 'effect'
    },
    {
        title: "描述",
        key: "content",
        width: 520,
        slot: 'content'
    },
    {
        title: "操作",
        key: "btn",
        width: 180,
        align: "left",
        slot: 'btn'
    }
],
// 数据
data: [
    {
        effect: '',
        content: '',
    }
],


// 添加一行
addTableRow() {
    let obj = {
        effect: '',
        content: ''
    }
    this.data.push(obj);
},

// 删除一行
delTableRow(index) {
    if (this.data.length == 1) {
        this.$Message.warning("至少存在一条数据")
    } else {
        this.data.splice(index, 1);
    }
},

// 复制一行
copyTableRow(index) {
    if (this.data[index].effect == '' && this.data[index].content == '') {
        this.$Message.error('该行数据为空，不能复制')
    } else {
        let obj = JSON.parse(JSON.stringify(this.data[index]));
        this.data.push(obj);
    }
},

// 需要上传数据时，可以用 promise，或者其他方法，我还没想好
// 上传按钮点击事件
submitHandle() {
    let promise1 = new Promise((resolve, reject) => {
        this.$refs.releaseContentForm.validate((valid) => {
            if (valid) {
                resolve('pass');
            }
        })
    })
    let promise2 = new Promise((resolve, reject) => {
        this.$refs.contentForm.validate((valid) => {
            if (valid) {
                resolve('pass');
            }
        })
    })
Promise.all([promise, promise]).then((res) => {

    ...

})

好啦，就到这里啦，白白！