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>