antd行点击选中取消选中

antd行点击选中取消选中,第1张

项目使用的是ant-design-vue@2.x,最近测试提了一个优化建议:行点击选中当前记录。接下来记录一下实现:

行点击事件的要点就是自定义行属性(customRow),我们可以两步搞定这个需求(行点击选中/取消选中)。

第一步,定义customLine方法:

import { reactive,} from "vue";

setup() {
  const formData = reactive({
    tableData: [], // 表格数据
    selectedIds: [], // 选中记录的ids
    selectedItems: [], // 选中的记录
  });
  // 自定义行属性
  const customLine = (record) => {
    return {
    // 行点击选中/取消选中
    onClick: () => {
      if (formData.selectedIds && formData.selectedIds.length > 0) {
        let index = -1;
        for (let i = 0; i < formData.selectedIds.length; i++) {
          if (formData.selectedIds[i] === record.id) {
            index = i;
          }
        }
        // 如果当前记录未选中,则选中
        if (index === -1) {
          dataState.selectedRowKeys.push(record.id);
          formData.selectedItems.push(record);
          formData.selectedIds.push(record.id);
        } else {
          // 否则取消选中
          formData.selectedIds.splice(index, 1);
          let keyIndex = dataState.selectedRowKeys.findIndex(item => item === record.id);
          dataState.selectedRowKeys.splice(keyIndex, 1);
          let itemIndex = formData.selectedItems.findIndex(item => item.id === record.id);
          formData.selectedItems.splice(itemIndex, 1);
        }
      } else {
        // 当前选中记录为空,直接选中
        dataState.selectedRowKeys.push(record.id);
        formData.selectedItems.push(record);
        formData.selectedIds.push(record.id);
      }
    }
  };
};
  return {
    formData,
    customLine,
  };
}

第二步,在标签中设置:


补充:row-selection是已有的点击复选框选中的配置

import { toRefs, reactive,} from "vue";

setup() {
    const dataState = reactive({
      selectedRowKeys: [],
    });
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      dataState.selectedRowKeys = selectedRowKeys;
      formData.selectedIds.length = 0;
      formData.selectedItems.length = 0;
      if (selectedRows.length > 0) {
        editBtn.value = false;
      } else {
        editBtn.value = true;
      }
      selectedRows.forEach((item) => {
        formData.selectedItems.push(item);
        formData.selectedIds.push(item.id);
      });
    };
    return {
      ...toRefs(dataState),
    };
}

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1297448.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存