当前位置：首页 > news >正文

el-table下的复选框关联勾选

news 来源：原创 2025/4/29 0:41:06

效果展示：

  <el-table style="height: 500px;" :data="tableData" border empty-text="暂无数据" v-loading="loading"
      :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" show-overflow-tooltip
      ref="multipleTable" @select="handleSelection" @select-all="handleCount">
    <el-table-column type="selection" width="40" fixed="left" />
</el-table>

// 多选
const checkId = ref([]);  
const multipleTable = ref()
// 手动勾选单选的情况
const handleSelection = (val) => {
  if (checkId.value.length > val.length) {
    // 取消选中
    let checkAll = checkId.value;
    checkId.value = val;
    checkAll.forEach((item) => {
      let v = val.find(i => i.qdfphm === item.gl_qdfphm);  //关联的条件
      if (v === undefined && item.gl_qdfphm != '') {
        multipleTable.value.toggleRowSelection(item, false);
        checkId.value = val.filter(v => item.id != v.id)
      }
    })
  } else {
    // 选中
    checkId.value = val;
    let v = val[val.length - 1];
    if (v.gl_qdfphm != '') {
      let vv = tableData.value.find(item => item.qdfphm == v.gl_qdfphm)  //关联的条件
      multipleTable.value.toggleRowSelection(vv, true);
      checkId.value.push(vv);
    }
  }
  if (chooseTab.value == 1) {
    badgeTotal.value.total_supply = checkId.value.length
  } else if (chooseTab.value == 2) {
    badgeTotal.value.total_delete = checkId.value.length
  }
}
// 手动勾选全选情况(计算总数)
const handleCount = (val) => {
  checkId.value = val;
}

总结：重点在toggleRowSelection（）方法