动态Import更新

Ben Lin

2024-06-25 f73947395184fd635df3d74c1c4b2701d0c708c1

 src/views/demo/table/TreeTable.vue

@@ -4,38 +4,35 @@
      <template #toolbar>
        <a-button type="primary" @click="expandAll">展开全部</a-button>
        <a-button type="primary" @click="collapseAll">折叠全部</a-button>
        <a-button type="primary" @click="collapseRows(['4'])">折叠第五行</a-button>
        <a-button type="primary" @click="expandRows(['4'])">展开第五行</a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { getBasicColumns, getTreeTableData } from './tableData';

  export default defineComponent({
    components: { BasicTable },
    setup() {
      const [register, { expandAll, collapseAll }] = useTable({
        title: '树形表格',
        isTreeTable: true,
        rowSelection: {
          type: 'checkbox',
          getCheckboxProps(record: Recordable) {
            // Demo: 第一行（id为0）的选择框禁用
            if (record.id === '0') {
              return { disabled: true };
            } else {
              return { disabled: false };
            }
          },
        },
        titleHelpMessage: '树形组件不能和序列号列同时存在',
        columns: getBasicColumns(),
        dataSource: getTreeTableData(),
        rowKey: 'id',
      });
      return { register, expandAll, collapseAll };
  const [register, { expandAll, collapseAll, expandRows, collapseRows }] = useTable({
    title: '树形表格',
    isTreeTable: true,
    accordion: true, // 手风琴效果
    rowSelection: {
      type: 'checkbox',
      getCheckboxProps(record: Recordable) {
        // Demo: 第一行（id为0）的选择框禁用
        if (record.id === '0') {
          return { disabled: true };
        } else {
          return { disabled: false };
        }
      },
    },
    titleHelpMessage: '树形组件不能和序列号列同时存在',
    columns: getBasicColumns(),
    dataSource: getTreeTableData(),
    rowKey: 'id',
    showSelectionBar: true, // 显示多选状态栏
  });
</script>