vue封装动态表格方式详解

<template>
  <el-table :data="tableData" style="width: 100%" height="100%">
    <el-table-column
      v-for="column in columnList"
      :key="column.prop"
      v-bind="column.columnAttrs"
    >
      <template slot-scope="scope">
        <slot
          v-if="column.type === 'slot'"
          :name="column.slotName"
          :row="scope.row"
        ></slot>
        <components
          v-else
          :row="scope.row"
          :prop="column.prop"
          :config="column"
          :is="`column-${column.type}`"
        ></components>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
const modules = {};
// 将当前目录以及子目录中的index.vue自动注册为组件（require.context是webpack提供的，如果是vite要用vite的方式）
const files = require.context("./", true, /index.vue$/);
files.keys().forEach((item) => {
  const name = item.split("/")[1];
  modules[`column-${name}`] = files(item).default;
});
console.log(modules, "modules");
export default {
  name: "CustomTable",
  components: {
    // 组件动态注册
    ...modules,
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columnList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped></style>

<template>
  <span>{{ config.call(row, config) }}</span>
</template>
<script>
export default {
  name: "ColumnFunc",
  props: {
    config: {
      type: Object,
    },
    row: {
      type: Object,
    },
  },
};
</script>
<style scoped></style>

<template>
  <span>{{ row[config.prop] }}</span>
</template>
<script>
export default {
  name: "ColumnText",
  props: {
    config: {
      type: Object,
    },
    row: {
      type: Object,
    },
  },
};
</script>
<style scoped></style>

<template>
  <CustomTable :column-list="columnList" :table-data="tableData">
    <template #operate="{ row }">
      <el-button size="small">删除</el-button>
      <el-button size="small" type="primary" @click="onEdit(row)">
        编辑
      </el-button>
    </template>
  </CustomTable>
</template>
<script>
import CustomTable from "@/components/my-table/CustomTable";
export default {
  name: "CustomTableDemo",
  components: {
    CustomTable,
  },
  data() {
    return {
      columnList: [
        {
          type: "text",
          prop: "name",
          columnAttrs: {
            label: "姓名",
            width: "180",
          },
        },
        {
          type: "text",
          prop: "date",
          columnAttrs: {
            label: "日期",
            width: "180",
          },
        },
        {
          type: "func",
          prop: "sex",
          columnAttrs: {
            label: "性别",
          },
          call: (row) => {
            switch (row.sex) {
              case 1: {
                return "男";
              }
              case 2: {
                return "女";
              }
              default: {
                return "未知";
              }
            }
          },
        },
        {
          type: "slot",
          slotName: "operate",
          prop: "operate",
          columnAttrs: {
            label: "操作",
          },
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          sex: 1,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          sex: 2,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          sex: 3,
        },
      ],
    };
  },
  methods: {
    onEdit(row) {
      console.log(row);
    },
  },
};
</script>
<style scoped></style>