当前位置: 首页 > 工具软件 > Naive UI > 使用案例 >

Naive UI之Data Table

艾自强
2023-12-01

render列,将列的数据增加点击事件

<n-data-table
            ref="partyRef"
            :columns="columns"
            :data="tableData"
            :pagination="false"
            :bordered="false"
            :max-height="450"
            :row-key="rowKey"
            @update:checked-row-keys="handleCheck"
          />
const columns = [
{
      type: 'selection',
      // disabled(row: RowData) {//设置不能被选择的行
      //   return row.name === 'Edward King 3';
      // },
},
{
      title: '名称(人数)',
      key: 'name',
      width: 150,
      align: 'center',
      render(row) {
        return h(
          NText,
          {
             name: row.name+row.count,
          },
          {
            type: '',
             onClick: () => {
               console.log(row.id);
               const orgIdList = ref([]);
               orgIdList.value.push(row.id);
            params.value = Object.assign(params.value, { orgIdList: orgIdList });//接口参数
               reloadTable(actionRef);//刷新表格
             },
             class: 'cursor-pointer',
          },
          { default: () => row.name + '(' + row.count + ')' }//默认显示值
        );
      },
    },
]

data部分

const tableData = ref([]);
onMounted(async () => {
//接口请求
    getList().then((res) => {
      tableData.value = res;
    });
  });

 类似资料: