el-table多选回显以及避免重复选择问题

<template>
   
      <el-table
        height="450px"
        ref="tableList"
        :data="dataList"
        stripe
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :reserve-selection="true" type="selection" width="55"> </el-table-column>
     </el-table>
</template>
 
<script>
data(){
  return{
    dataList: [], 
    selectList :[],
    choosePeople, //多选内容
    rowSelectFlag : false,
    getRowKeys(row){
       return  row.id
      }
     },
},
methods:{
  //回显的时候默认选中
    showCheck() {
      setTimeout(() => {
        this.rowSelectFlag = true
        this.selectList = this.personList // 父组件传的值
        this.dataList.forEach(row => {
          const matchedIndex = this.selectList.findIndex(item => item.userId == row.userId)
          this.$refs['tableList'].toggleRowSelection(row, matchedIndex != -1)
        })
        this.rowSelectFlag = false
      }, 0);

    },
   // 选择数据时触发
   handleSelectionChange(val) {
      if (this.rowSelectFlag) return
      this.selectList = val
    },
  }
 
</script>
 

注意: :row-key=“getRowKeys” 和 reserve-selection="true"是必须的,
设置rowSelectFlag避免重复选择

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table多选回显可以通过v-model绑定一个数组来实现。在多选模式下,el-table会将选的行数据存储在这个数组,我们只需要在这个数组存储的数据来进行回显即可。 具体实现方法如下: 1. 在el-table上绑定v-model,将选的行数据存储在一个数组。 2. 在回显,将需要回显的数据与存储选行数据的数组进行比较,如果存在相同的数据,则将该行选。 下面是一个示例代码: ```html <template> <div> <el-table :data="tableData" v-model="selectedRows" style="width: 100%"> <el-table-column type="selection"></el-table-column> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2021-01-01', name: '张三', address: '北京市朝阳区' }, { date: '2021-01-02', name: '李四', address: '上海市浦东新区' }, { date: '2021-01-03', name: '王五', address: '广州市天河区' } ], selectedRows: [] } }, mounted() { // 模拟回显数据 const data = [ { date: '2021-01-02', name: '李四', address: '上海市浦东新区' }, { date: '2021-01-03', name: '王五', address: '广州市天河区' } ] // 遍历回显数据,将需要回显的数据与存储选行数据的数组进行比较 data.forEach(item => { this.tableData.forEach(row => { if (JSON.stringify(item) === JSON.stringify(row)) { this.selectedRows.push(row) } }) }) } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值