封装element ui - table，支持自定义列

二次封装element ui table, 支持自定义列

注意：

a.自定义列需要在引用页面重新写一下，这样就可以定义化了，多数用于一些转换，或者操作列场景下，自行考虑即可

 <el-table-column
          slot="cardType"
          label="证件类型"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            {{ scope.row.cardType }}
          </template>
        </el-table-column>

b.操作列可以自己指定位置，如下，如果要固定的话，就设置el-table-column组件的fixed属性即可。

 columns: [
        { slot: "cardType" },
        { label: "名称", prop: "userId" },
        { label: "链接", prop: "userName" },
        { label: "排序", prop: "tel" },
        { slot: "operate" },
      ], // 操作列

具体封装如下

1 table.vue

<template>
  <el-table :data="tableData" style="width: 100%" max-height="250">
    <template v-for="(item, index) in columns">
      <slot v-if="item.slot" :name="item.slot"></slot>
      <el-table-column
        v-else
        :key="index"
        :fixed="item.fiexed"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  name: "VicTable",
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    init() {},
  },
};
</script>
<style scoped>
</style>

2 引用

<vic-table :tableData="tableData" :columns="columns">
        <el-table-column
          slot="operate"
          label="操作"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              size="small"
              type="warning"
              icon="el-icon-edit"
              @click="edit(scope.row)"
              >编辑
            </el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-success"
              @click="startUsing(scope.row)"
              >启用
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          slot="cardType"
          label="证件类型"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            {{ scope.row.cardType }}
          </template>
        </el-table-column>
      </vic-table>


//数据和配置项

columns: [
        { slot: "cardType" },
        { label: "名称", prop: "userId" },
        { label: "链接", prop: "userName" },
        { label: "排序", prop: "tel" },
        { slot: "operate" },
      ], // 操作列
      tableData: [
        {
          userId: "admin",
          userName: "管理员",
          tel: "13812345678",
          cardType: 1,
        },
        {
          userId: "Mary",
          userName: "玛丽",
          tel: "1319987678",
          cardType: 2,
        },
      ],

剩下的，自己加一下