vue封裝動(dòng)態(tài)表格方式詳解

更新時(shí)間：2022年08月15日 09:49:41 作者：悟空和大王

這篇文章主要為大家介紹了vue封裝動(dòng)態(tài)表格方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

這里只是提供一種想法并提供一些快速實(shí)現(xiàn)，實(shí)際這些技巧可以用在很多地方，如：動(dòng)態(tài)表單

實(shí)現(xiàn)方式簡(jiǎn)述

通過(guò)json定義要顯示的列
通過(guò)slot實(shí)現(xiàn)自定義列
通過(guò)require.context實(shí)現(xiàn)組件的自動(dòng)注冊(cè)，并通過(guò)<components is="xxx"></components>, 調(diào)用動(dòng)態(tài)注冊(cè)的組件

優(yōu)點(diǎn)：

支持通過(guò)slot自定義擴(kuò)展
支持編寫(xiě)vue文件擴(kuò)展列的顯示方式
支持通過(guò)json來(lái)控制列順序和哪些列需要顯示哪些不需要
能避免封裝的table組件越來(lái)越復(fù)雜

表格實(shí)現(xiàn)：

<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 = {};
// 將當(dāng)前目錄以及子目錄中的index.vue自動(dòng)注冊(cè)為組件（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: {
    // 組件動(dòng)態(tài)注冊(cè)
    ...modules,
  },
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columnList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped></style>

func組件

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

text組件：

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

調(diào)用示例

<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: "上海市普陀區(qū)金沙江路 1518 弄",
          sex: 1,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1517 弄",
          sex: 2,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1519 弄",
          sex: 3,
        },
      ],
    };
  },
  methods: {
    onEdit(row) {
      console.log(row);
    },
  },
};
</script>
<style scoped></style>