vue3+ts任何实现这种表格

Question

vue3+ts+el-table任何实现这种表格,点击第四列展开二级数据，二级数据只有第四列到第九列有

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue3 + TS 实现表格

你想要实现一个 Vue3 项目，使用 TypeScript，使用 Element UI 库，创建一个表格，点击第四列展开二级数据，二级数据只有第四列到第九列有。

可以使用 Element UI 的 ElTable 组件和 ElTableColumn 组件来实现。下面是一个简单的示例代码：

<template>
  <el-table :data="tableData" border>
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="sex" label="性别" />
    <el-table-column prop="expand" label="展开" :formatter="expandFormatter" />
  </el-table>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-ui';

interface TableData {
  name: string;
  age: number;
  sex: string;
  expand: boolean;
  children: {
    [key: string]: any;
  }[];
}

export default defineComponent({
  setup() {
    const tableData = ref<TableData[]>([
      {
        name: 'John',
        age: 20,
        sex: '男',
        expand: false,
        children: [
          { '第四列': '值1', '第五列': '值2', '第六列': '值3', '第七列': '值4', '第八列': '值5', '第九列': '值6' },
          { '第四列': '值7', '第五列': '值8', '第六列': '值9', '第七列': '值10', '第八列': '值11', '第九列': '值12' },
        ],
      },
      // ...
    ]);

    const expandFormatter = (row: TableData) => {
      if (row.expand) {
        return '展开';
      } else {
        return '收起';
      }
    };

    return {
      tableData,
      expandFormatter,
    };
  },
});
</script>

在上面的代码中，我们定义了一个 TableData 接口来描述表格数据的结构。然后，我们使用 ElTable 和 ElTableColumn 组件来创建表格。第四列使用 formatter 属性来实现展开和收起的功能。

在 expandFormatter 函数中，我们检查 row.expand 属性，如果为 true 则返回 '展开'，否则返回 '收起'。

在 setup 函数中，我们使用 ref 函数来创建一个 tableData 对象，并将其赋值给 tableData 属性。然后，我们返回 tableData 和 expandFormatter 函数。

这样，点击第四列时，表格将展开或收起二级数据。