element-ui table组件通过js配置，实现效果

最近在开发公司后台系统中，发现有大量的表格，这里用的是element ui的表格，每次都要大量的的html, 如果可以通过js配置就最好不过了。

开始干活： （组件封装， 支持element中的所有属性，以及事件）

<template>
  <div id="BasicTable">
    <el-table
      ref="table"
      v-bind="bindTableOptions"
      :data="bindTableOptions && bindTableOptions.data"
      style="width: 100%"
      v-on="$listeners"
    >
      <template v-for="item in bindTableOptions && bindTableOptions.columns">
        <el-table-column
          v-if="item.customSlot"
          v-bind="item"
          :min-width="item.minWidth || 200"
          :key="item.id"
        >
          <template slot-scope="scope">
            <slot
              :name="item.customSlot"
              v-bind:scope="scope"
              v-bind:column="item"
            >
            </slot>
          </template>
        </el-table-column>
        <el-table-column v-else v-bind="item" :min-width="item.minWidth || 200">
        </el-table-column>
      </template>
      <template v-if="bindTableOptions && bindTableOptions.actionOptions">
        <el-table-column
          :min-width="bindTableOptions.actionOptions.minWidth || 200"
          v-bind="bindTableOptions.actionOptions"
        >
          <template slot-scope="scope">
            <template
              v-for="(btn, index) in bindTableOptions.actionOptions.columns"
            >
              <el-button
                v-if="(btn.hide && !btn.hide(scope.row)) || !btn.hide"
                :key="index"
                v-bind="btn"
                :style="btn.style"
                @click="handleClickAction(btn.event, scope, btn)"
              >
                {{ btn.text }}
              </el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div
      class="page_box"
      v-if="bindTableOptions && bindTableOptions.showPagination"
    >
      <el-pagination
        v-bind="bindTableOptions && bindTableOptions.paginationOp"
        v-on="$listeners"
        ref="pagination"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "BasicTable",
  data() {
    return {
      // 分页配置
      paginationOp: {
        background: true,
        layout: "prev, pager, next",
        total: 10,
      },
      // 是否显示分页
      showPagination: false,
    };
  },
  computed: {
    bindTableOptions() {
      // console.log(this.$attrs, 1200);
      return {
        paginationOp: this.paginationOp,
        showPagination: this.showPagination,
        ...this.$attrs,
      };
    },
  },
  methods: {
    // 获取分页器实例
    getPaginationRef() {
      if (this.$refs.pagination) {
        return this.$refs.pagination;
      }
    },
    // 获取表格实例
    getTableRef() {
      if (this.$refs.table) {
        return this.$refs.table;
      }
    },
    // 分页器事件派发
    hanldePageAction(type, data) {
      this.$emit(type, data);
    },
    // 点击操作栏
    handleClickAction(type, scope, btn) {
      this.$emit(type, { scope, btn });
    },
  },
};
</script>

<style lang="scss" scoped>
.page_box {
  margin-top: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

页面使用： (导入组件)

根据自己的项目导入封装的table组件

页面使用：

js配置：

export const tableColumns = [
  {
    prop: "id",
    label: "ID"
  },
  {
    prop: "uid",
    label: "用户"
  },
 {
    prop: "u_headimg",
    label: "发起者用户头像",
    align: "center",
    customSlot: 'portrait'
  },
  {
    prop: "type",
    label: "支付类型",
    align: "center",
    formatter: row => {
      const user_status = row.type;
      if (user_status == 1) {
        return "支付宝";
      } else if (user_status == 2) {
        return "微信";
      } else if (user_status == 3) {
        return "苹果";
      }
    }
  },

  },
  {
    prop: "created_at",
    label: "提交时间",
    align: "center"
  }
];

// 表格操作
export const actionColumns = [
  {
    text: "确认支付",
    event: "pay",
    size: "mini",
    type: "danger",
    hide: row => {
      return row.status == 1;
    }
  },
  {
    text: "已支付",
    size: "mini",
    event: "none",
    type: "info",
    hide: row => {
      return row.status == 0;
    }
  }
];

// 表格操作栏
export const actionOptions = {
  prop: "",
  label: "操作",
  columns: actionColumns,
  fixed: "right",
  align: "center"
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

配置说明：
tableColumns： 就是对应的columns数组， 支持element table中的所有配置。
自定义节点的话，通过customSlot来定义插槽。

然后通过作用域插槽获取slot-scope=“{ scope }“每条数据，不要忘记花括号， 还支持获取当前列的配置，通过slot-scope=”{ column}”，具体可见组件的封装的源码
actionColumns： 表格操作的columns 数组 （event 是定义事件的名称，使用的时候需要在组件中通过@event 监听）
actionOptions： 表格的操作配置（适用有操作的表格）

element 的事件监听， 直接在组件中绑定就行了。例如：

以上就是我在公司业务的table组件的二次封装了，写的不是很全面，但已经够用了，以后有具体再优化。