需求:写一个动态的表格,可以复制、删除、添加新的一行,效果图如下:
为什么是图片不是动画呢,因为我不会,哈哈哈哈
点击添加更多内容
点击复制
点击删除
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) => {
...
})
好啦,就到这里啦,白白!