NDataTable 数据上移下移

NDataTable 数据上移下移

<template>
    <n-data-table :columns="sortord" :data="sortordList" />
</template>
<script lang="ts" setup>
//数据表格数据
const sortordList =ref([]);

   const sortWay = [

    { label: '升序', value: 'asc' },

    { label: '降序', value: 'desc' },

   ];

    const dropDown = [

    { label: '上移', key: '上移' },

    { label: '下移', key: '下移' },

    { label: '删除', key: '删除' },

    ];

//列的表头，以及渲染格式 ，此处排序是下拉列表框
const sortord = [
    {
      title: '序号',
      // @ts-ignore
      render(row, index) {
        return index + 1;
      },
    },
    {
      title: '字段名',
      key: 'api_name',
    },
    {
      title: '字段类型',
      key: 'api_port',
    },
    {
      title: '排序方式',
      render(row, index) {
        return h(NSelect, {
          value: row.sort,
          options: sortWay,
          onUpdateValue(v) {
            sortordList.value[index]['sort'] = v;
          },
        });
      },
    },
    {
      title: '操作',
      render(row) {
        return h(
          NDropdown,
          {
            options: dropDown,
            size: 'small',
            onSelect: (key) => {
              sortMethod(key, row);
            },
          },
          {
            default: () => {
              return h(
                NButton,
                {
                  strong: true,
                  size: 'small',
                },
                { default: () => '排序' }
              );
            },
          }
        );
      },
    },
  ];
  function sortMethod(key, row) {
    sortordList.value.map((v: any, i) => {
      if (v['id'] === row.id) v.index = i;
    });
    let index = row.index;
    switch (key) {
      case '上移':
        if (row.index == 0) {
          message.warning('处于顶端，不能上移');
        } else {
          let arr = sortordList.value[index - 1];
          sortordList.value.splice(index - 1, 1);
          sortordList.value.splice(index, 0, arr);
        }
        break;
      case '下移':
        if (row.index === sortordList.value.length - 1) {
          message.warning('处于末端，不能下移');
        } else {
          let arr = sortordList.value[index + 1];
          sortordList.value.splice(index + 1, 1);
          sortordList.value.splice(index, 0, arr);
        }
        break;
      default:
        sortordList.value = sortordList.value.filter((v) => {
          return v.id != row.id;
        });
    }
  }
</script>