BasicTable 表格组件、使用方法、属性列表

<template>
  <div class="p-4">
    <BasicTable
      title="基础示例"
      titleHelpMessage="温馨提醒"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
    >
      <template #toolbar>
        <a-button type="primary"> 操作按钮 </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicColumn, BasicTable } from '/@/components/Table';

  const columns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
    },
  ];

  const dataSource = [
    { id: '1', testInput: '123', testTextarea: '456' },
    { id: '2', testInput: '789', testTextarea: '123' },
  ];

  export default defineComponent({
    components: { BasicTable },
    setup() {
      return {
        columns,
        dataSource,
      };
    },
  });
</script>

<template>
  <div class="p-4">
    <BasicTable @register="register">
      <template #toolbar>
        <a-button type="primary" @click="handleButton"> 加载表格 </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicColumn, BasicTable, useTable } from '/@/components/Table';

  const columns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
      customRender: ({ record }) => {
        return record.testInput || '无数据';
      },
    },
  ];

  const dataSource = [
    { id: '1', testInput: '123', testTextarea: '456' },
    { id: '2', testInput: '789', testTextarea: '123' },
  ];

  export default defineComponent({
    components: { BasicTable },
    setup() {
      const [register, methods] = useTable({
        title: '基础示例',
        titleHelpMessage: '温馨提醒',
        pagination: false,
        columns,
        dataSource,
      });

      function handleButton() {
        methods.setLoading(true);
        methods.setColumns(columns);
        methods.setTableData(dataSource);
        setTimeout(() => {
          methods.setLoading(false);
        }, 200);
      }

      return {
        register,
        handleButton,
      };
    },
  });
</script>

<template>
  <BasicTable @register="register" />
</template>
<script>
  export default defineComponent({
    components: { BasicForm },
    setup() {
      const [register] = useTable();
      return { register };
    },
  });
</script>

<template>
  <TableAction
    :actions="actionColumn.actions(record)"
    :dropDownActions="actionColumn.dropDownActions(record)"
  />
</template>
<script lang="ts" setup>
import { TableAction } from '/@/components/Table';
const actionColumn: BasicColumn = {
  width: 160, // 操作列宽
  actions: (record: Recordable) => [
    {
      icon: 'clarity:note-edit-line',
      title: t('编辑数据'),
      onClick: handleForm.bind(this, { id: record.id }),
      // 按钮权限控制，指定权限字符串
      auth: 'test:testData:edit',
    },
    {
      icon: 'ant-design:stop-outlined',
      color: 'error',
      title: t('停用数据'),
      // 是否需要启用确认框
      popConfirm: {
        title: t('是否确认停用数据'),
        confirm: handleDisable.bind(this, { id: record.id }),
      },
      // 按钮权限控制，指定权限字符串
      auth: 'test:testData:edit',
      // 控制按钮是否显示（区别：show 是显示或隐藏；ifShow 是显示或移除）
      show: () => record.status === '0',
      ifShow: () => record.status === '0',
    },
  ],
  // 操作列更多按钮定义
  dropDownActions: (record: Recordable) => [
    {
      icon: 'ant-design:reload-outlined',
      label: t('重置密码'),
      onClick: handleResetpwd.bind(this, { userCode: record.userCode }),
      auth: 'sys:empUser:resetpwd',
    },
  ],
};
</script>

<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #img="{ text }">
        <TableImg :size="60" :simpleShow="true" :imgList="text" />
      </template>
      <template #imgs="{ text }">
        <TableImg :size="60" :imgList="text" />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
import { TableImg } from '/@/components/Table';
const columns: BasicColumn[] = [
  {
    title: '图片列表1',
    dataIndex: 'imgArr',
    helpMessage: [
      '这是简单模式的图片列表',
      '只会显示一张在表格中',
      '但点击可预览多张图片',
    ],
    width: 140,
    slots: { customRender: 'img' }, // 5.1.0 及之前
    slot: 'img', // 5.2.0+ （Antdv 3.x 不再使用 slots）
  },
  {
    title: '照片列表2',
    dataIndex: 'imgs',
    width: 160,
    slots: { customRender: 'imgs' }, // 5.1.0 及之前
    slot: 'imgs', // 5.2.0+ （Antdv 3.x 不再使用 slots）
  },
]
</script>

<template>
  <BasicTable @register="register">
    <template #toolbar>
      <a-button type="primary" @click="expandAll">展开全部</a-button>
      <a-button type="primary" @click="collapseAll">折叠全部</a-button>
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  const [register, { expandAll, collapseAll }] = useTable({
    title: '树形表格',
    isTreeTable: true,
    childrenColumnName: 'children',
    rowSelection: { type: 'checkbox' },
    clickToRowSelect: false,
    titleHelpMessage: '树形组件不能和序列号列同时存在',
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        width: 250,
        align: 'left',
      },
      {
        title: '地址',
        dataIndex: 'address',
        align: 'left',
      },
      {
        title: '创建时间',
        width: 200,
        sorter: true,
        dataIndex: 'createDate',
      },
    ],
    dataSource: getTreeTableData(),
    rowKey: 'id',
  });
  function getTreeTableData() {
    const data: any = (() => {
      const arr: any = [];
      for (let index = 1; index < 60; index++) {
        arr.push({
          id: `l1-${index}`,
          name: `JeeSite-${index}`,
          address: `Shandong-${index}`,
          createDate: new Date().toLocaleString(),
          children: [
            {
              id: `l2-${index}`,
              name: `JeeSite-l2-${index}`,
              address: `Shandong-l2-${index}`,
              createDate: new Date().toLocaleString(),
            },
          ],
        });
      }
      return arr;
    })();
    return data;
  }
</script>

<template>
  <BasicTable
    title="表格嵌套子表例子"
    titleHelpMessage="温馨提醒"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="false"
    :canResize="true"
  >
    <template #expandedRowRender>
      <BasicTable
        :columns="expandedColumns"
        :dataSource="expandedDataSource"
        :maxHeight="200"
        :pagination="false"
        :canResize="false"
        rowKey="id"
      />
    </template>
  </BasicTable>
</template>
<script lang="ts" setup>
  import { BasicColumn, BasicTable } from '/@/components/Table';
  const columns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
    },
  ];
  const dataSource = [
    { id: '1', testInput: '123', testTextarea: '456', treeLeaf: '0' },
    { id: '2', testInput: '789', testTextarea: '123', treeLeaf: '0' },
  ];
  const expandedColumns: BasicColumn[] = [
    {
      title: '单行文本',
      dataIndex: 'testInput',
      width: 230,
      align: 'left',
    },
    {
      title: '多行文本',
      dataIndex: 'testTextarea',
      width: 130,
      align: 'left',
    },
  ];
  const expandedDataSource = [
    { id: '1', testInput: '123', testTextarea: '456' },
    { id: '2', testInput: '789', testTextarea: '123' },
  ];
</script>
<style lang="less">
  .jeesite-basic-table {
    .ant-table-expand-icon-col {
      width: 15px;
    }
    .ant-table-row .ant-table-cell:first-child {
      text-align: center;
    }
    .ant-table-tbody .ant-table-wrapper:only-child {
      padding: 20px;
    }
  }
</style>