Secondary encapsulation of element el-table table (with table height adaptation)

Preface

During my internship at the company, I used the vue+element-ui framework for front-end development, and used the el-table table more frequently. Some business logics were similar, and some places had high repetitiveness. If multiple pages used the same function, I had to write logically similar code repeatedly. So I planned to encapsulate the table component, encapsulate the same code and logic together, and extract different business logics. Without further ado, let's implement it.

1. Native el-tbale code——simple encapsulation

Here we directly quote the official basic usage template and copy it directly (✪ω✪). The following code mainly extracts the html part. It can be seen that each el-table-column contains prop, label, and width attributes, but these attribute values ​​are slightly different. The rest of the parts are almost the same, so the table header (the definition of el-table-column in each column of the table) can be encapsulated here, and the different places can be encapsulated into an array object structure, and then the html part is completed through the for loop.

Before packaging

 <template>
  <el-table
   :data="tableData"
   style="width: 100%">
   <el-table-column
    prop="date"
    label="Date"
    width="180">
   </el-table-column>
   <el-table-column
    prop="name"
    label="Name"
    width="180">
   </el-table-column>
   <el-table-column
    prop="address"
    label="Address">
   </el-table-column>
  </el-table>
 </template>

 <script>
  export default {
   data() {
    return {
     tableData: [{
      date: '2016-05-02',
      name: 'Wang Xiaohu',
      address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai'
     }, {
      date: '2016-05-04',
      name: 'Wang Xiaohu',
      address: 'No. 1517, Jinshajiang Road, Putuo District, Shanghai'
     }, {
      date: '2016-05-01',
      name: 'Wang Xiaohu',
      address: 'No. 1519, Jinshajiang Road, Putuo District, Shanghai'
     }, {
      date: '2016-05-03',
      name: 'Wang Xiaohu',
      address: 'No. 1516, Jinshajiang Road, Putuo District, Shanghai'
     }]
    }
   }
  }
 </script>

Table appearance

After packaging

<template>
 <el-table :data="tableData" style="width: 100%">
  <template v-for="(item, key) in header">
   <el-table-column
    :key="key"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
   >
   </el-table-column>
  </template>
 </el-table>
</template>

<script>
export default {
 data() {
  return {
   header: [
    { prop: "date", label: "date", width: "180" },
    { prop: "name", label: "Name", width: "180" },
    { prop: "address", label: "address" }
   ],
   tableData: [
    {
     date: "2016-05-02",
     name: "Wang Xiaohu",
     address: "No. 1518, Jinshajiang Road, Putuo District, Shanghai"
    },
    {
     date: "2016-05-04",
     name: "Wang Xiaohu",
     address: "No. 1517, Jinshajiang Road, Putuo District, Shanghai"
    },
    {
     date: "2016-05-01",
     name: "Wang Xiaohu",
     address: "No. 1519, Jinshajiang Road, Putuo District, Shanghai"
    },
    {
     date: "2016-05-03",
     name: "Wang Xiaohu",
     address: "No. 1516, Jinshajiang Road, Putuo District, Shanghai"
    }
   ]
  };
 }
};
</script>

Now the data is still relatively small, and the advantage of encapsulation component encapsulation may not be obvious, but compared with the previous code, the logic here looks clearer, and when modifying the column, you can directly change the header data in the data, without having to "operate" in the HTML code (￣▽￣)／. The above is the simplest encapsulation. Strictly speaking, it is just a simple extraction of the data structure in the code. In normal business, there must be more than such a simple encapsulation. The following is the key point─━ _ ─━✧

2. el-tbale code - complex encapsulation

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

el-table real secondary packaging

Secondary packaging source code

<template>
 <el-table
  empty-text="No data yet"
  ref="table"
  :data="tableList"
  border
  stripe
  fit
  highlight-current-row
  :height="inTableHeight"
  @selection-change="selectionChange"
  @row-click="rowClick"
 >
  <!-- Select box -->
  <el-table-column
   v-if="select"
   type="selection"
   fixed="left"
   width="55"
   align="center"
  />
  <template v-for="(itm, idx) in header">
   <!-- Special processing column -->
   <el-table-column
    v-if="itm.render"
    :key="idx"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
    :sortable="itm.sortable ? itm.sortable : false"
    :align="itm.align ? itm.align : 'center'"
    :fixed="itm.fixed ? itm.fixed : null"
    :show-overflow-tooltip="itm.tooltip"
    min-width="50"
   >
    <template slot-scope="scope">
     <ex-slot
      :render="itm.render"
      :row="scope.row"
      :index="scope.$index"
      :column="itm"
     />
    </template>
   </el-table-column>
   <!-- Normal column -->
   <el-table-column
    v-else
    :key="idx"
    :prop="itm.prop ? itm.prop : null"
    :label="itm.label ? itm.label : null"
    :width="itm.width ? itm.width : null"
    :sortable="itm.sortable ? itm.sortable : false"
    :align="itm.align ? itm.align : 'center'"
    :fixed="itm.fixed ? itm.fixed : null"
    :formatter="itm.formatter"
    :show-overflow-tooltip="itm.tooltip"
    min-width="50"
   />
  </template>
 </el-table>
</template>

<script>
// Component for custom content var exSlot = {
 functional: true,
 props: {
  row: Object,
  render: Function,
  index: Number,
  column: {
   type: Object,
   default: null
  }
 },
 render: (h, context) => {
  const params = {
   row: context.props.row,
   index: context.props.index
  };
  if (context.props.column) params.column = context.props.column;
  return context.props.render(h, params);
 }
};

export default {
 components: { exSlot },
 props: {
  tableList: {
   type: Array,
   default: () => []
  },
  header: {
   type: Array,
   default: () => []
  },
  select: {
   type: Boolean,
   default: () => false
  },
  height:
   type: [Number, String, Function],
   default: () => null
  }
 },
 data() {
  return {
   inTableHeight: null
  };
 },
 created() {
  //This stage can receive the passed parameters of the parent component this.inTableHeight = this.height;
 },
 mounted() {
  this.$nextTick(() => {
   //Table height adapts to browser size this.changeTableHight();
   if (!this.height) {
    window.onresize = () => {
     this.changeTableHight();
    };
   }
  });
 },
 destroyed() {
  //Highly adaptive event logout window.onresize = null;
 },
 watch:
  /**
   * Highly adaptive after data changes */
  tableList() {
   this.$nextTick(() => {
    this.changeTableHight();
   });
  }
 },
 methods: {
  /**
   * Change after the selection box is selected, event distribution */
  selectionChange(selection) {
   this.$emit("selection-change", selection);
  },
  /**
   * Click event */
  rowClick(row, column, event) {
   this.$emit("row-click", row, column, event);
  },
  /**
   * Height adaptive* When the table display space is less than 460px, it will be displayed at 460px. If it is larger, the height will be filled*/
  changeTableHight() {
   if (this.height) {
    //If there is a height passed in, cancel the adaptive this.inTableHeight = this.height;
    this.$refs.table.doLayout();
    return;
   }
   let tableHeight = window.innerHeight || document.body.clientHeight;
   //Height setting let disTop = this.$refs.table.$el;
   //If there are elements above the table, subtract these heights to adapt to the window. 66 is the blank part below. tableHeight -= disTop.offsetTop + 66;
   if (disTop.offsetParent) tableHeight -= disTop.offsetParent.offsetTop;
   this.inTableHeight = tableHeight < 460 ? 460 : tableHeight;
   //Redraw the table this.$refs.table.doLayout();
  }
 }
};
</script>
<style></style>

Explanation of packaging codes

The above is the code I encapsulated. Some properties or methods are not used, so I did not encapsulate the corresponding methods and properties. If you need the corresponding places in your development, you can just fill them in. When I encapsulated the table, I used the ternary operator here for compatibility. If the corresponding attribute is not passed, a default value will be given. For example, the align attribute, I set it to be centered by default. There are also methods. In terms of method references in the table, the official method is actually to use the $emit event to distribute the corresponding parameters and method names to the parent component in the same way. In this way, the parent component can refer to the element official documentation to use these methods. I just forwarded it once in the component. I didn’t use too many methods when I wrote it myself, so I only encapsulated one or two. You can add them yourself if necessary. In addition to the above two packages, there is a special place that the check box cannot be placed in the loop, otherwise an error will occur. It may be an index problem, so I use a separate parameter to control whether to display the selection box. In addition, the company's products require that the table be able to adapt to the height of the page. I also modified this function for a long time. 460 is the minimum height. All about height adaptation is in the changeTableHight() method. If this function is not needed, just delete the function and all places that reference it.

height: If this attribute is not passed in, the table height will be adaptive as mentioned above. This attribute can be used to specify the height of the table.
formatter: This property will be invalid if a slot is used in a column, so I set up two columns. If there is a render method indicating that the cell needs to embed code, a special column is used, otherwise a normal column is used, so formatter and render cannot be used at the same time.

Render: Finally, we have arrived at the most critical part (￣▽￣)／. This is the biggest difficulty for me to encapsulate the table. For me, render is a virtual node. When the DOM and CSSOM trees are merged into the render tree, the code is modified.

The above is my detailed explanation of encapsulating the table. There may be some omissions. After all, encapsulating this table has taught me a lot, so some places may not be explained clearly or in place before. I hope you can correct me.

3. Parent component references encapsulated components

Of course, you can only know whether a component that has been encapsulated for such a long time is useful after using it. Regarding references, you must first register the component at the reference location. If it has been registered globally, you can ignore the local registration. I will not explain the registration of components in detail here (oﾟ▽ﾟ)o. I used global registration, so here I directly introduced my own encapsulated components.

<template>
 <div class="hello">
  <xd-table :table-list="tableData" :header="header" height="300"></xd-table>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 data() {
  return {
   header: [
    { prop: "w", label: "w" },
    { prop: "x", label: "x",
     formatter: (row) => {
      return row.x.toFixed(3);
     },
    },
    { prop: "d", label: "d",
     formatter: (row) => {
      return row.d.toFixed(2);
     },
    },
    {
     label: "operation",
     render: (h, data) => {
      return (
       <el-button
        type="primary"
        onClick={() => {
         this.handleClick(data.row);
        }}
       >
        Click me to get row data</el-button>
      );
     },
    },
   ],
   tableData: [
    { w: 1, x: 99.25123, d: 0.23892 },
    { w: 1, x: 255.6666, d: 0.99134 },
   ],
  };
 },
 methods: {
  handleClick(row) {
   console.log(row);
  },
 },
};
</script>

Remember to register before referencing a component. Here I only use a few properties, and the other properties are not used because it is a demo. The main purpose is to show the method of render embedded code, and the other is to use the official formatter method.
One thing you need to pay attention to is that I used JSX template syntax in render. Here you need to configure the JSX syntax separately in the VUE project. If you don’t want to use JSX, you can write it directly. Because the embedded template code written without JSX syntax is difficult to read, I won’t show it. I personally recommend using JSX syntax, although the usage method is slightly different from native Vue in some places.

Effect screenshots

Conclusion

It took me nearly half a month to encapsulate the Vue component this time, from the initial contact to the discovery of bugs and then the modification. After going back and forth, I finally streamlined the encapsulation to appear in this secondary encapsulation component. Maybe for people who are familiar with Vue and element, this encapsulation is actually very simple, but for me, this is one of the better components I encapsulated during this internship. Of course, in addition to encapsulating this component, I also have other things to do. It is impossible for me to give up the company's work (hahahaha︿(￣︶￣)︿). In short, I learned a lot in the process of encapsulating components, which is a great progress, so I will write a blog to record it.

This is the end of this article about the secondary packaging implementation of element el-table (with table height adaptation). For more relevant element el-table secondary packaging content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!