Elder-ui has an El-table component, but you still need to write the el-table-column manually.

Here, we want to further remove the configuration and encapsulate an enhanced-el-table component on the basis of the EL-table.

If you want to use this, you don’t need to manually write the el-table-column inside:

<enhanced-el-table :data="tableData" :colConfigs="colConfigs" ></enhanced-el-table>
Copy the code
  • Data property, data to display,[{name: yan sauce, age: 18}, {...}]
  • ColConfigs property, eachcolumnA configuration array of items, as follows
colConfigs: [
    { prop: "date".label: "Date"},
    { prop: "name".label: "Name"},
    { prop: 'address'.label: 'address'}]Copy the code

ColConfigs is easier to understand if you look at it in terms of a table, replacing the attributes on an el-table-column with objects

The code in this article may be more complex later, so if you need it, look at the Github code

Of course, the end of the article also attached, each section of the specific code, if necessary, can also see

TL; DR

  • I just wrote aenhanced-el-tableComponent that acts as the originalel-tablecomponent
  • The only difference is, there’s an extra onecolConfigs, and other attributes, events, and methodsel-tablecomponent
  • Oh, if the table doesn’t have enough columnscolConfigsThe description is provided hereslot
  • Want to see directlyenhanced-el-tableHow are components used, including complications, skipped to this articleOptimization of a demonstration example

Component Overview

In summary, the enhanced-el-table component is probably out.

El – table – the processing of the column

Implement the initial table:

In app. vue you can simply write:

In the case of enhanced el-Table, without colConfigs, it looks like this

El-table (:data="data") el-table-column(label=" date" prop="date") el-table-column(label=" name" prop="name") El-table-column (label=" address" prop="address")Copy the code

Of course, with colConfigs, the loop is straightforward

el-table(:data="data")
  el-table-column(v-for="config in colConfigs"  v-bind="config" :key="config.prop")

Copy the code

To optimize the

  • el-tableIt also has a lot of properties, and this is done by a simplev-bind="$attrs"That will beenhanced-el-fromThe above properties automatically arriveel-table.
  • In the same way,v-on="$listeners"
  • el-tableThe above method, which is a little bit more cumbersome, is manual assignment
  • Part of the column, need to customize, throughslotNameProperty that does not participate in the internal loop and needs to write its own logic
  • In the comments section, @white chiefman reminds us that we can directly use children to handle the multi-layer table header. At present, only two layers of logic are written, and it is better to use recursion for more layers. How to write recursion components
// el-table(ref="elTable":data="data" v-bind="$attrs" v-on="$listeners")
  mounted() {
    const methods = [ "clearSelection"."toggleRowSelection"."toggleAllSelection"."toggleRowExpansion"."setCurrentRow"."clearSort"."clearFilter"."doLayout"."sort" ];
    methods.forEach(method= > (this[method] = this.$refs.elTable[method]));
  }
Copy the code

The above logic shows the entire code in the following section.

Optimization of a demonstration example

Example effect:

The code for EnhancedElTable is as follows

<template lang="pug"> el-table(ref="elTable" :data="data" v-bind="$attrs" v-on="$listeners") template(v-for="colConfig In colConfigs") slot(v-if=" colconfig. slotName" :name=" colconfig. slotName" v-bind="colConfig") More levels may require recursion, Please refer to the https://juejin.cn/post/6868560126602412045 el - table - column (v - else - if = "colConfig. Children & & colConfig.children.length" v-bind="colConfig" :key="colConfig.label") el-table-column(v-for="innerColConfig in colConfig.children" v-bind="innerColConfig" :key="innerColConfig.label") el-table-column(v-else="colConfig.children && colConfig.children.length" v-bind="colConfig" :key="colConfig.label") </template> <script> export default { name: "enhanced-el-table", props: { data: { type: Array, default() { return []; } }, colConfigs: { type: Array, default() { return []; } } }, mounted() { const methods = [ "clearSelection", "toggleRowSelection", "toggleAllSelection", "toggleRowExpansion", "setCurrentRow", "clearSort", "clearFilter", "doLayout", "sort" ]; methods.forEach(method => (this[method] = this.$refs.elTable[method])); }}; </script>Copy the code

The code for app.vue is as follows

<template lang="pug"> div#app enhanced-el-table(:data="tableData",:colConfigs="colConfigs" ref="multipleTable" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange") //- Here action needs custom column template(#action="colConfig") el-table-column(v-bind="colConfig") template(#default="scope") el-button(size="mini" @click="handleEdit(scope.$index, $index (scope.$index); $index (scope.$index); The scope. (row) ") to delete div style = "margin - top: 20px") el-button(@click="toggleSelection([tableData[1], El-button (@click="toggleSelection()") {{multipleSelection}} </template> <script>  import EnhancedElTable from "./components/EnhancedElTable.vue"; export default { name: "App", components: { EnhancedElTable }, data() { return { colConfigs: [ { type: "Selection ", width: 55}, {prop: "date", label: "date", width: 180}, {prop: "name", label: "name", width: 180, sortable: True}, {label: "address ", children: [{prop: "province", label: "province"}, {prop: "city", label: "city"}, {prop:" address ", children: [{prop: "province", label: "province"}, {prop: "city", label: "city"}, {prop: {slotName: "action", label: "operation"}], tableData: Array. The from ({length: 6}, (v, I) = > ({date: ` 2016-5 - ${I + 1} `, name: ` x.h. ${I + 1} `, province: ${I + 1} ` ` province, city: ${I + 1} ', address: ${I + 1} ')), multipleSelection: []}; }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; }, handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); }}}; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } </style>Copy the code

reference

  • Gracefully use the Table component of Element-UI

By the way, there’s also a companion to make El-Form more usable through configuration

code

Code: Component overview

<template lang="pug"> el-table(:data="data") </template> <script> export default { name: "enhanced-el-table", props: { data: { type: Array, default() { return []; } }, colConfigs: { type: Array, default() { return []; }}}}; </script>Copy the code