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>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
        <!-- 标题后面增加，批量红色删除按钮 -->
        <Popconfirm :title="t('是否确认删除选中的用户吗？')" @confirm="handleDeleteSelected()">
          <a-button
            danger
            type="default"
            v-if="selectedRowKeysRef.length > 0"
            v-auth="'sys:empUser:edit'"
            class="ml-4"
          >
            <Icon icon="i-ant-design:delete-outlined" color="error" /> {{ t('删除') }} ({{
              selectedRowKeysRef.length
            }})
          </a-button>
        </Popconfirm>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { Popconfirm } from 'ant-design-vue';

  const selectedRowKeysRef = ref<string[]>([]);

  const [registerTable, { reload, getForm }] = useTable({
    // 省略其它属性。。。
    // 方式一：默认就显示复选框
    rowSelection: {
      onChange: (selectedRowKeys: string[], _selectedRows: Recordable[]) => {
        selectedRowKeysRef.value = selectedRowKeys;
      },
    },
    // 方式二：左上角表格设置按钮，选中“复选框”后再显示
    defaultRowSelection: {
      onChange: (selectedRowKeys: string[], _selectedRows: Recordable[]) => {
        selectedRowKeysRef.value = selectedRowKeys;
      },
    },
  });

  async function handleDeleteSelected() {
    let message: any[] = [];
    for (const userCode of selectedRowKeysRef.value) {
      try {
        await empUserDelete({ userCode });
      } catch (e: any) {
        const msg = e.response?.data?.message || e.message;
        message.push(msg);
      }
    }
    if (message.length == 0) {
      message.push(t('批量删除成功！'));
    }
    selectedRowKeysRef.value = [];
    showMessage(message.join(', '));
    handleSuccess({});
  }
</script>

<BasicTable @edit-change="onEditChange" />

<template>
  <BasicTable @register="registerTable">
    <template #firstColumn="{ record }">
        {{ record.testInput }}
    </template>
    <template #customFilterIcon="filter">
      <Icon
        icon="i-ant-design:search-outlined"
        :style="{ color: filter.filtered ? '#108ee9' : undefined }"
      />
    </template>
    <template #customFilterDropdown="filter">
      <div class="p-2" v-if="filter.column.dataIndex == 'testInput'">
        <a-input
          ref="searchInput"
          :placeholder="`${t('搜索')}${filter.column.customTitle}`"
          :value="filter.selectedKeys[0]"
          style="width: 168px; margin-bottom: 8px; display: block"
          @change="(e: any) => filter.setSelectedKeys(e.target.value ? [e.target.value] : [])"
        />
        <a-button type="primary" size="small" class="mr-2 w-20" @click="filter.confirm()">
          {{ t('确定') }}
        </a-button>
        <a-button
          size="small"
          class="w-20"
          @click="
            filter.clearFilters();
            filter.confirm();
          "
        >
          {{ t('重置') }}
        </a-button>
      </div>
    </template>
  </BasicTable>
</template>

<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>

<template>
  <BasicTable @register="registerTable">
    <template #firstColumn="{ record }">
      <a @click="handleForm({ id: record.id })">
        {{ record.testInput }}
      </a>
    </template>
    <template #expandedRowRender="{ record }">
      <div>编号: {{ record.id }}（这里生成内容自定义，也可以加载子表）</div>
    </template>
  </BasicTable>
</template>