vue2实践:el-table实现由用户自己添加删除行数的动态表格

59 篇文章 ¥19.90 ¥99.00

需求

项目中需要提供一个动态表单,如图:

当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。

至少要有一行数据,但是没有上限。

24052270805141a1baaebbae5a9bdda9.png

思路

这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是:

1、table里面的每一个cell,需要放置一个input来支持用户编辑。

2、最后一列放置两个button,响应用户添加或删除行的需求

实现

data

managerList:[{
   userId:undefined,
   nickName:undefined,
   phonenumber:undefined
}],

template 

因为要求至少有一行数据,所以删除按钮增加一个判断,v-if="managerList.length > 1",当只剩一

Vue2项目中,使用Element UI的el-table组件时,可以通过`span-method`属性来实现表格行和单元格的动态合并。`span-method`属性接收一个方法,该方法返回一个对象,指定要合并的行和列的范围。 以下是一个具体的实现步骤和示例代码: 1. **准备数据**:假设我们有一个包含多行数据的表格,每行数据有一个`date`字段用于分组。 2. **定义合并方法**:在Vue组件中定义一个方法来处理合并逻辑。该方法根据数据的某个字段(例如`date`)来判断是否需要合并行或单元格。 3. **设置el-table**:在el-table组件中绑定`span-method`属性,并传入定义好的合并方法。 ```html <template> <el-table :data="tableData" :span-method="mergeRow"> <el-table-column prop="date" label="日期" width="120"></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="address" label="地址" width="300"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2023-10-01', name: '张三', address: '北京市朝阳区' }, { date: '2023-10-01', name: '李四', address: '北京市海淀区' }, { date: '2023-10-02', name: '王五', address: '上海市浦东新区' }, { date: '2023-10-02', name: '赵六', address: '上海市静安区' }, ], }; }, methods: { mergeRow({ row, column, rowIndex, columnIndex }) { // 假设根据date字段合并 if (column.property === 'date') { // 获取当前日期的所有行 const rows = this.tableData.filter(item => item.date === row.date); // 计算合并的行数 const rowSpan = rows.length; // 计算当前行是第几行 const currentRowIndex = this.tableData.findIndex(item => item.date === row.date); // 如果是第一行,返回合并的行数,否则返回0 return { rowspan: rowIndex === currentRowIndex ? rowSpan : 0, colspan: 1, }; } // 其他列不合并 return { rowspan: 1, colspan: 1, }; }, }, }; </script> ``` 在这个示例中,我们根据`date`字段来合并行。如果某一行是第一行,则返回合并的行数`rowSpan`,否则返回0,表示该行被合并。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值