VUE中,使用iview table组件,用代码设置某一行数据选中

6 篇文章 0 订阅

在项目开发中,需要操作表格,使用的是iview的table组件,操作需求如下:
1、表格需要显示复选框,可以进行单选和全选
2、选择某一行数据,复选框选中,取得当前行数据进行操作
3、更新当前选中行的数据

遇到的问题:
当前选择行数据更新后,当前行的复选框不能显示选中~~

解决办法:

1、修改表格某行数据的时候,添加属性 _checked = true 表示选中改行,_disabled = true,表示禁用该行,代码如下

   // 取得更新后的行数据
   var updatedRowData = getUpdatedRowDate();
   // 取得更新行在表格数据中的索引
   var index = getUpdatedRowIndex();
   // 重点:为更新行添加属性_checked = true
   updatedRowData._checked = true;
  //更新表格数据
  this.$set(this.tableDatas,index,updatedRowData)
您可以通过以下步骤实现vue+iview外部按钮删除Table表格通过复选框选中的某一行数据: 1. 在table组件添加selection-change事件处理函数,用于监听选中数据的变化。 ```html <template> <Table :data="tableData" @selection-change="handleSelectionChange"> <TableColumn type="selection" :selectable="selectable"></TableColumn> <TableColumn label="姓名" prop="name"></TableColumn> <TableColumn label="年龄" prop="age"></TableColumn> <TableColumn label="性别" prop="gender"></TableColumn> </Table> <Button type="primary" @click="handleDelete">删除选中</Button> </template> ``` 2. 在methods定义handleSelectionChange方法,用于保存当前选中数据。 ```javascript methods: { handleSelectionChange(selectedItems) { this.selectedItems = selectedItems; }, handleDelete() { // 删除选中数据 this.selectedItems.forEach(item => { const index = this.tableData.indexOf(item); this.tableData.splice(index, 1); }); // 取消选中状态 this.$refs.table.clearSelection(); } } ``` 3. 在handleDelete方法实现删除选中数据,并调用$refs.table.clearSelection()方法取消选中状态。 完整代码如下: ```html <template> <Table :data="tableData" @selection-change="handleSelectionChange" ref="table"> <TableColumn type="selection" :selectable="selectable"></TableColumn> <TableColumn label="姓名" prop="name"></TableColumn> <TableColumn label="年龄" prop="age"></TableColumn> <TableColumn label="性别" prop="gender"></TableColumn> </Table> <Button type="primary" @click="handleDelete">删除选中</Button> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ], selectedItems: [] }; }, methods: { handleSelectionChange(selectedItems) { this.selectedItems = selectedItems; }, handleDelete() { // 删除选中数据 this.selectedItems.forEach(item => { const index = this.tableData.indexOf(item); this.tableData.splice(index, 1); }); // 取消选中状态 this.$refs.table.clearSelection(); } } }; </script> ``` 其,需要注意的是在TableColumn添加了type="selection"属性,用于实现复选框选择功能。同时,还需要定义selectable方法,用于控制某些行是否可选。 ```javascript selectable(row, index) { // 第一行不可选 return index !== 0; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值