About ordinary table sorting elmentUI no what to say, but in the actual project is sometimes need dynamic column, in the process of dynamic column means that prop field uncertainty, dynamic column sort may also be because there is no field to deal with, and we need complete dynamic column as well as to the dynamic column sorting front-end sort 】 【 according to different situations

Dynamic column

The current project encountered is that the table may have different columns according to the year/quarter/month, for example, the year has [2020, 2019,…]. , quarter [2020-4, 2020-3,…] , monthly [2020-December, 2020-November…] , and each type of field is not determined, for example, the year may be 2 years, 3 years, 6 years, which requires multiple columns dynamic, and because the column is dynamic, then the corresponding attribute and table header values fetched in the background are arrays, not individual values

Dynamic column implementation scheme 1 (columns do not need sorting optional)

A dynamic column is defined as a dynamic array, in which only the header values requested from the background are stored, such as [2019-10, 2019-9,2019-8]. For the data in the table, the array in the array is treated as a string, and the specific value cannot be obtained. The data needs to be processed into the corresponding data using filter. The relevant implementation code is as follows


 <template>
    <el-table :data="dataList"> <! --> <el-table-column v-for="(item,index) in theadList"
        :key="index"
        :label="item"
        prop="colprops"
        align="center"
      >
        <template slot-scope="scope"> <div>{{ scope.row.colprops | transToValue(index)) }}</div> </template> </el-table-column> <! </el-table> <template> <script>export default {
      filters: {
        transToValue(val, index) {
          return val[index]
        }
      },
      data() {
        return {
          theadList: [],
          dataList: []
        }
      },
      methods: {
        queryList(){ const data = {... } this.$httpRes.dataarr contains a header array such as [2019,2018,2017,2016] this.theadlist = res.datearr // Res.rows [0] is a {// colprops: ['8%'.'9.6%'.'6.4%'.'6%']，
                      otherVal: 'xxxx'//} this.dataList = res.rows }).catch(err => { ... }) } } } <script>Copy the code

Dynamic column implementation scheme 2 (column sorting required)

Because to do sorting, plan a cannot get corresponding columns of the attributes, not every single of dynamic column sorting, so has two, one way to solve the problem of the dynamic data display, second scheme to form the dynamic column with ordinary column as ordered by using various methods, the principle of dynamic uncertain column will give the corresponding attribute values, {label: ‘collabel’, props: ‘colProps’}} and then the value of each item is colProps

<template> <! -- table list --> <el-table :data="dataList" border @sort-change="changeTableSort"> <! --> <el-table-column v-for="(item,index) in theadList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :sortable="'custom'"> <! <template slot-scope= if the data still needs processing, do not use the following code"scope"> <div>{{ scope.row[item.prop] | toFixed(6) }}</div> </template> </el-table-column> <! </el > </template> <script>export default {
  data() {
    return{// Dynamic list header and attribute theadList: [{label:' ', prop: ' ' }],
      dataList: []
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    queryList() { const data = {... } this.$http.post(data).then(res => {
        this.loading = falseProp tr[index]; datalist item item['tr'This.theadlist = res.datearr. Map ((item, index) => {this.theadList = res.datearr. Map ((item, index) => {return { 
              label: item, 
              prop: 'tr'+ index}}) this.datalist = res.rows this.dataList.forEach(item => {for (let i = 0; i < res.dateArr.length; i++) {
            item['tr' + i] = item.rateArr[i] || '0'} }) }).catch(err => {... })}, // Return the current column to be sorted changeTableSort(e) {// Get the current column field const prop = e.prop // if descendingif (e.order === 'descending'This.datalist = this.datalist. Sort ((a, b) => {this.datalist = this.datalist.return parseFloat(a[prop]) - parseFloat(b[prop])
        })
      } elseThis.datalist = this.datalist. Sort ((a, b) => {this.datalist = this.datalist.return parseFloat(b[prop]) - parseFloat(a[prop])
        })
      }
    }
  }
}
</script>
Copy the code

Dynamic column sort

  1. If a dynamic column is to be sorted, props must have a dynamic property value. If a dynamic column is to be sorted, props must have a dynamic property value. If a dynamic column is to be sorted, props must have a dynamic property value
  2. The custom attribute fields in the table header match the custom attribute fields in the data. For example, the table header is defined as cols1, cols2, cols3. Then the data item has matching attributes and values
const = theadList = [
    {label: '2019', prop: 'cols1'},
    {label: '2018', prop: 'cols2'}
]
const  dataList = [{
    cols1: 'xxx',
    cols2: 'xxxx',}]Copy the code
  1. When using changeTableSort for sorting, if the value is null, “” and other values, you need to process to 0 before comparison, otherwise the sorting method may fail
  2. Sortable =”‘custom'”
  3. Attached source figure