1. Analyze requirements

  • Here’s a picture to illustratedemand:

According to the data returned by the back end (res is an array, its element is an object, the ext property in the object is an object, and it contains three properties, default, free and pay, and these three are array format). :

  • Render one that looks like thisform ：

resData:

  1. resFor each element ofname(that is, the name of postage template, such as Chengdu freight template),
  2. restheextThree arrays under propertydefault,free,payEach array must have one larger line (in this row, the first column is the name of the address to which it is shipped, as defined hereareaProperty, but the backend is not given to this field, you can process the data to add the field, here will not elaborate. thisareaThe column occupied by the property should appear as a multi-line merge on the page.

Two, code implementation:

<template> <div class="layout"> <el-table :data="res" > <el-table-column prop="name"> <template slot-scope="scope"> <div  class="tab_header"> <span style="font-weight:600;" >{{scope.row.name}}</span> <div class="operate"> <span @click="handleEdit(scope.$index, <span @click="handleDelete(scope.$index, scope.row)"> Delete </span> </div> </div> </div> Table header = "default"; table header = "default"; table header = "default" - note: When the label has no value, it still takes up space, so the current table will appear on the page with an empty row representing the header. Need to manually change (rewrite) thead style of Element table --> <div V -for="item in (scope.row.ext)" :key="item.id"> <el-table :data="item" border :class="item! ==scope.row.ext.default?'tab-thead-style':''" style="box-sizing: border-box; border-top:none;" :span-method="objectSpanMethod"> <el-table-column :label="item===scope.row.ext.default?" Prop ="area"></el-table-column> <el-table-column :label="item===scope.row.ext.default?" Prop ="weight"></el-table-column> <el-table-column :label="item===scope.row.ext.default?" Prop ="first_price"></el-table-column> <el-table-column :label="item===scope.row.ext.default?" Prop ="weight_incre"></el-table-column> <el-table-column :label="item===scope.row.ext. Default? prop="extend_price"></el-table-column> </el-table> </div> </template> </el-table-column> </el-table> </div> </template> <script> export default {data () {return {// res refers to the data format returned by the back end, res: [{id: 1, dealer_id: 0, name: 'Shipping template ', type: 1, ext: {default: [{area: 'default ', type: 1, region: '1', weight:' d', weight_incre: 'd', first_price: 'freight d', extend_price:' final freight d'}], free: [{area: 'free', type: 1, region: '1', weight: 'f ', weight_incre: {area: 'free', type: 1, region: '1', weight: 'f ', weight_incre: Pay: [{area: 'pay', type: 1, region: '1', weight: [{area: 'pay', type: 1, region: '1', weight: First_price: 'freight p', readd_price:' final freight p'}, {area: 'pay', type: 1, region: '1', weight: First_price: 'freight p', readd_price:' final freight p'}, {area: 'pay', type: 1, region: '1', weight: 'the first heavy p, weight_incre:' continued heavy p 'first_price:' freight p 'extend_price:' the final freight p}}}, {id: 2, dealer_id: 0, name: Type: 2, ext: {default: [{area: 'default ', type: 1, region: '1', weight:' d', weight_incre: 'extend_price ',' extend_price ', 'extend_price ', free: [{area: 'free1', type: 1, region: '1', weight: 'weight_incre ', first_price:' freight f', extend_price: 'final freight f'}, {area: 'free', type: 1, region: '1', weight: Pay: [{area: 'pay1', type: 1, region: 1}], pay: [{area: 'pay1', type: 1, region: 1] '1', weight: 'first weight p', weight:' continued weight p', first_price: 'freight p', extend_price:' final freight p'}, {area: 'pay', type: 1, region: '1', weight: 'first weight p', weight:' continued weight p', first_price: 'freight p', extend_price:' final freight p'}, {area: 'pay', type: 1, region: '1', weight: 'first weight p', weight_incre:' continued weight p', first_price: 'freight p', extend_price:' final freight p'}, {area: 'pay1', type: 1, region: '1', weight: 'first weight p', weight:' continued weight p', first_price: 'freight p', extend_price:' final freight p'}, {area: 'pay', type: 1, region: '1', weight: 'first weight p', weight:' continued weight p', first_price: 'freight p', extend_price:' final freight p'}, {area: 'pay', type: 1, region: Weight_incre, first_price, weight_incre, extend_price, methods: { handleEdit (index, row) { console.log(index, row) }, handleDelete (index, row) { console.log(index, row) }, objectSpanMethod ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex === 0) { let maxLen this.res.forEach(val => { const arr = [val.ext.default.length, val.ext.free.length, val.ext.pay.length] arr.sort((a, MaxLen = arr.pop()}) return {// The rowspan should be sorted Extspan: maxLen, colSPAN: 1}} else {return {rowspan: 0, colspan: 1} 0 } } } } } } </script> <style lang="scss"> .layout{ .tab_header{ color:#333; padding:0 5px 0 5px; height:45px; line-height:45px; border:1px solid #eee; display:flex; justify-content: space-between; background:rgb(233, 225, 225); } .operate{ span{ font-size: 14px; margin-right: 20px; margin-right:20px; color:#409EFF; cursor: pointer; }} /* The label of the table is empty */.tab-thead-style{thead{display: none; } } } </style>Copy the code

Three, knowledge summary:

  • Why solve it this way?

    The UI component used by the project is Element. Its Table component does not directly handle row operations.

    ②. El-table, which is used to render the render table by injecting an array of data objects and filling the data in the el-table-column with a prop property corresponding to the key name of the object. El-table-column represents a column, and the label attribute defines the column name of the table, that is, a key name of the object represents a column.

    ③ I can’t think of a better solution

  • When multiple tables share the same header, note:

    ①. Make a judgment and pay attention to the value of label.

    If the el-table-column attribute label has no value, it will still take up space. Therefore, the current table will have an empty row representing the table header on the page, and you need to manually change (rewrite) the theAD style of the Element table

  • Table ();

    Element’s Table component provides customizable column templates for nested Table sections. Scoped Slot retrieves row, column, $index, and store data.

    ② An Element’s Table component can merge rows or columns. If multiple rows or columns share the same data, it can merge rows or columns. You can merge rows or columns by passing a span-method method to the table. See the **objectSpanMethod** method above.