NwTable表格组件 #

<template>
<div class="example">
     <NwTable
          :columns="columns"
          :data-source="tableData"
          title="简单表格"
          :showTableSetting="true"
          :show-index-column="false"
          :rowSelection="{ type: 'radio' }"
          :bordered="true"
          :actionColumn="actionColumn"
          @change="tableChange"
        >
          <template #expandedRowRender="{ record }">
            <span>id: {{ record.id }} </span>
          </template>
          <!-- <template #tableSearch>
            <div>查询表单</div>
          </template> -->
          <template #bodyCell="{ column }">
            <template v-if="column.key === 'action'">
              <Button type="link" primary>查看</Button>
              <Button type="text" danger>查看</Button>
            </template>
          </template>
        </NwTable>
</div> 
</template>
<script setup lang="ts">
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
      },
      {
        title: "标题",
        dataIndex: "title",
      },
      {
        title: "内容",
        dataIndex: "desc",
      },
      {
        title: "数值",
        dataIndex: "num",
        customRender: ({ record }: { record: any }) => {
          return record.num + 1;
        },
      },
    ];
    const actionColumn = {
      width: 260,
      title: "操作",
      dataIndex: "action",
      // slots: { customRender: 'action' },
    };
    const tableData = (function () {
      let lists = [];
      for (let i = 0; i < 50; i++) {
        lists.push({
          id: i,
          title: "这是一篇文章" + i,
          desc: "好几份送二代更何况的风格" + i,
          num: Math.floor(Math.random() * 100),
        });
      }
      return lists;
    })();
    const tableChange = (e: any) => {
      console.log(e);
    };
</script>