Vue2 针对el-table进行封装实实现高复用性

Vue2 针对 el-table 进行封装可以提高代码的复用性，同时也能简化开发流程，让开发者能够更加专注于业务逻辑的实现。

以下是一个简单的 el-table 封装示例：

<template>
  <el-table :data="tableData" :columns="columns" v-loading="loading"></el-table>
</template>

<script>
export default {
  name: "MyTable",
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    loadData() {
      this.tableData = this.data;
    }
  },
  mounted() {
    this.loadData();
  },
  watch: {
    data() {
      this.loadData();
    }
  }
};
</script>

在这个示例中，我们将 el-table 组件的 data 和 columns 属性分别作为 MyTable 组件的 props，通过 loadData 方法将 props 中的数据赋值给 tableData，并绑定到 el-table 的 data 属性上，实现了对 el-table 的封装。

使用这个封装后的组件，只需要传入相应的 data 和 columns 数据即可渲染出一个 el-table，如下所示：

<template>
  <my-table :data="tableData" :columns="tableColumns"></my-table>
</template>

<script>
import MyTable from "@/components/MyTable";

export default {
  components: {
    MyTable
  },
  data() {
    return {
      tableData: [
        {
          name: "John",
          age: 18,
          gender: "Male"
        },
        {
          name: "Jane",
          age: 22,
          gender: "Female"
        }
      ],
      tableColumns: [
        {
          prop: "name",
          label: "Name"
        },
        {
          prop: "age",
          label: "Age"
        },
        {
          prop: "gender",
          label: "Gender"
        }
      ]
    };
  }
};
</script>

通过这种方式封装 el-table，我们可以大大提高代码的复用性，同时也能减少重复的代码编写，提高开发效率。