NDataTable 数据表格自定义多选

NDataTable 数据表格自定义多选

<template>
 <n-data-table :columns="columnsPar" :data="paramList" />
</template>
<script lang="ts" setup>
let paramsAll = ref(false);
let paramsInde = ref(false);
let paramsChecked: any = ref([]);
let returnAll = ref(false);
let returnInde = ref(false);
let returnChecked: any = ref([]);
const columnsPar = [
    {
      title: h(
        NSpace,
        {
          justify: 'start',
        },
        {
          default: () => {
            return h(NCheckbox, {
              label: '设为请求参数',
              indeterminate: paramsInde.value,
              checked: paramsAll.value,
              onUpdateChecked(val) {
                addParams((paramsAll.value = val), 'param');
              },
            });
          },
        }
      ),
      render(row, index) {
        return h(NCheckbox, {
          defaultChecked: row.param,
          checked: row.param,
          onUpdateChecked(val) {
            subParams(val, index, 'param');
          },
        });
      },
    },
    {
      title: h(
        NSpace,
        {
          justify: 'start',
        },
        {
          default: () => {
            return h(NCheckbox, {
              label: '设为请求参数',
              indeterminate: returnInde.value,
              checked: returnAll.value,
              onUpdateChecked(val) {
                addParams((returnAll.value = val), 'return');
              },
            });
          },
        }
      ),
      render(row, index) {
        return h(NCheckbox, {
          defaultChecked: row.return,
          checked: row.return,
          onUpdateChecked(val) {
            subParams(val, index, 'return');
          },
        });
      },
    },
    {
      title: '字段名',
      key: 'api_name',
    },
    {
      title: '字段类型',
      key: 'api_port',
    },
    {
      title: '字段描述',
      key: 'api_protocol',
    },
    {
      title: '字段排序',
      render(row: never) {
        return h(
          NButton,
          {
            strong: true,
            size: 'small',
            onClick: () => addSortordList(row),
          },
          { default: () => '排序' }
        );
      },
    },
  ];
// 全选
  function addParams(val, node?) {
    paramList.forEach((v) => {
      v[node] = val;
    });
    switch (node) {
      case 'param':
        paramsChecked.value = val ? paramList : [];
        paramsAll.value = val;
        if (val) paramsInde.value = !val;
        break;
      default:
        returnChecked.value = val ? paramList : [];
        returnAll.value = val;
        if (val) returnInde.value = !val;
        break;
    }
    return paramList;
  }
  // 单选
  function subParams(val, index, node) {
    paramList[index][node] = val;
    switch (node) {
      case 'param':
        val
          ? 
          paramsChecked.value.push(paramList[index].api_protocol)
           : (paramsChecked.value = paramList.filter((v) => {
              return v[node] === true;
            }));
          paramsInde.value =
          paramsChecked.value.length != paramList.length && 
          paramsChecked.value.length != 0;
          paramsAll.value = paramsChecked.value.length == 
          paramList.length;
          break;
          default:
          val
          ? 
          returnChecked.value.push(paramList[index].api_protocol)
          : (returnChecked.value = paramList.filter((v) => {
              return v[node] === true;
            }));
          returnInde.value =
          returnChecked.value.length != paramList.length && 
          returnChecked.value.length != 0;
          returnAll.value = returnChecked.value.length == 
          paramList.length;
          break;
    }
  }
const sortordList: any = ref([]);
 function addSortordList(row: never) {
    if (sortordList.value.every((v) => v['id'] != row['id'])) {
      sortordList.value.push(row);
    } else {
      message.warning('字段排序中已经拥有该字段');
    }
  }
</script>