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

 效果展示:

el-table下的复选框关联勾选_第1张图片

  
    
// 多选
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()方法

你可能感兴趣的:(vue.js,javascript,前端)