vue3 +ts 移动端如何封装一个table表格 并且有操作列 可控制显示隐藏

在 Vue3 中使用 TypeScript 封装一个移动端的表格组件，可以使用 Vue3 Composition API 来实现，具体步骤如下：

1. 创建一个表格组件，可以在组件中定义表格的一些基本属性，例如表头、表格数据等。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <td v-for="(column, subIndex) in columns" :key="subIndex">{{ row[column.key] }}</td>
          <td>
            <a v-if="showEditButton" @click="handleEdit(row)">编辑</a>
            <a v-if="showDeleteButton" @click="handleDelete(row)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    rows: {
      type: Array,
      default: () => [],
    },
    showEditButton: {
      type: Boolean,
      default: false,
    },
    showDeleteButton: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleEdit(row: any) {
      this.$emit('edit', row);
    },
    handleDelete(row: any) {
      this.$emit('delete', row);
    },
  },
});
</script>

2. 在表格组件中定义操作列，例如添加编辑、删除按钮。

3. 通过 props 控制表格组件中操作列的显示和隐藏状态。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
          <th v-if="showEditButton || showDeleteButton">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <td v-for="(column, subIndex) in columns" :key="subIndex">{{ row[column.key] }}</td>
          <td v-if="showEditButton || showDeleteButton">
            <a v-if="showEditButton" @click="handleEdit(row)">编辑</a>
            <a v-if="showDeleteButton" @click="handleDelete(row)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    rows: {
      type: Array,
      default: () => [],
    },
    showEditButton: {
      type: Boolean,
      default: false,
    },
    showDeleteButton: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleEdit(row: any) {
      this.$emit('edit', row);
    },
    handleDelete(row: any) {
      this.$emit('delete', row);
    },
  },
});
</script>

这样就可以通过 props 控制表格组件中操作列的显示和隐藏状态了。