Vue + element dynamic multiple headers and dynamic slots

1. Demand
2. Effect
3. All codes

1. Demand

It allows users to configure tables by themselves and reduces the amount of system code maintenance.

2. Effect

Header json:

Note: scope (field name can be another one) is whether to enable the slot for this column. There are propChildren containing multiple levels of headers.

   
tableHead: [{
    key: '1',
    label: 'Date',
    prop: 'date',
    width: '100',
    headerAlign: 'center',
    align: 'center',
    scope: false,
    sortable: true
  },
  {
    key: '2',
    label: 'Name',
    prop: 'name',
    width: '100',
    headerAlign: 'center',
    align: 'center',
    scope: false,
    sortable: false
  },
  {
    key: '3',
    label: 'Analysis',
    prop: 'analysis',
    width: '100',
    headerAlign: 'center',
    propChildren: [{
      key: '31',
      label: 'Year-on-year',
      prop: 'TB',
      width: '100',
      headerAlign: 'center',
      align: 'center',
      scope: true,
      sortable: true
    },
    {
      key: '32',
      label: 'Month-on-month',
      prop: 'HB',
      width: '100',
      headerAlign: 'center',
      align: 'center',
      scope: true,
      sortable: true
    },]
  },
  {
    key: '4',
    label: 'amount',
    prop: 'price',
    width: '100',
    headerAlign: 'center',
    align: 'right',
    scope: false,
    sortable: true
  },
  {
    key: '5',
    label: 'Address',
    prop: 'address',
    width: '',
    headerAlign: 'left',
    align: 'left',
    scope: false,
    sortable: false
  }
  ],

3. All codes

<template>
  <el-table
    :data="tableData"
    stripe
    resizable
    border
    height="300"
    style="width: 1000px"
  >
    <el-table-column
      type="index"
      :index="indexMethod"
      label="Serial number"
      align="center"
      width="60"
    >
    </el-table-column>
    <el-table-column
      v-for="(item, index) in tableHead"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :align="item.align"
      :headerAlign="item.headerAlign"
      :sortable="item.sortable"
      show-overflow-tooltip
    >
      <el-table-column
        v-for="(item, index) in item.propChildren"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        :headerAlign="item.headerAlign"
        :sortable="item.sortable"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div v-if="item.scope === true">
            <div v-if="scope.row[item.prop] == ''">
              {{ scope.row[item.prop] }}
            </div>
            <div v-else-if="scope.row[item.prop] > '0'" style="color: green">
              {{ scope.row[item.prop] }}%<i class="el-icon-caret-top"></i>
            </div>
            <div v-else-if="scope.row[item.prop] < '0'" style="color: red">
              {{ scope.row[item.prop] }}%<i class="el-icon-caret-bottom"></i>
            </div>
          </div>
          <div v-else-if="scope.row[item.prop] < '0'" style="color: red">
            {{ scope.row[item.prop] }}
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <template slot-scope="scope">
          <div v-if="item.scope === true">
            <div v-if="scope.row[item.prop] == ''">
              {{ scope.row[item.prop] }}
            </div>
            <div v-else-if="scope.row[item.prop] < '0'" style="color: red">
              {{ scope.row[item.prop] }}
            </div>
             <div v-else-if="scope.row[item.prop] > '0'">
              {{ scope.row[item.prop] }}
            </div>
          </div>
        <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      // Whether the single header compares the data in this column depends on the scope.
      tableHead: [{
        key: '1',
        label: 'Date',
        prop: 'date',
        width: '100',
        headerAlign: 'center',
        align: 'center',
        scope: false,
        sortable: true
      },
      {
        key: '2',
        label: 'Name',
        prop: 'name',
        width: '100',
        headerAlign: 'center',
        align: 'center',
        scope: false,
        sortable: false
      },
      {
        key: '3',
        label: 'Analysis',
        prop: 'analysis',
        width: '100',
        headerAlign: 'center',
        propChildren: [{
          key: '31',
          label: 'Year-on-year',
          prop: 'TB',
          width: '100',
          headerAlign: 'center',
          align: 'center',
          scope: true,
          sortable: true
        },
        {
          key: '32',
          label: 'Month-on-month',
          prop: 'HB',
          width: '100',
          headerAlign: 'center',
          align: 'center',
          scope: true,
          sortable: true
        },]
      },
      {
        key: '4',
        label: 'amount',
        prop: 'price',
        width: '100',
        headerAlign: 'center',
        align: 'right',
        scope: false,
        sortable: true
      },
      {
        key: '5',
        label: 'Address',
        prop: 'address',
        width: '',
        headerAlign: 'left',
        align: 'left',
        scope: false,
        sortable: false
      }
      ],

      // data tableData: [{
        date: '2016-05-02',
        name: 'Wang Xiaohu',
        HB: '-1.1',
        TB: '2.5',
        price: '2982.01',
        address: '1518 Jinshajiang Road, Putuo District, Shanghai, Lane ...
      }, {
        date: '2016-05-04',
        name: 'Wang Xiaohu',
        HB: '-0.28',
        TB: '1.1',
        price: '2982.01',
        address: 'No. 1517, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-01',
        name: 'Wang Xiaohu',
        HB: '28',
        TB: '-0.11',
        price: '2982.01',
        address: 'No. 1519, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-03',
        name: 'Zhang San',
        HB: '21',
        TB: '2.11',
        price: '-201.02',
        address: 'No. 1516, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-11',
        name: 'Zhang San',
        HB: '0.28',
        TB: '-1.1',
        price: '2982.01',
        address: 'No. 1516, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-02',
        name: 'Wang Xiaohu',
        HB: '-0.18',
        TB: '-1.15',
        price: '2982.01',
        address: '1518 Jinshajiang Road, Putuo District, Shanghai, Lane ...
      }, {
        date: '2016-05-04',
        name: 'Wang Xiaohu',
        HB: '-1.01',
        TB: '1.1',
        price: '2982.01',
        address: 'No. 1517, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-01',
        name: 'Wang Xiaohu',
        HB: '-28',
        TB: '2.11',
        price: '2982.01',
        address: 'No. 1519, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-03',
        name: 'Zhang San',
        HB: '',
        TB: '0.1',
        price: '-200.01',
        address: 'No. 1516, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-11',
        name: 'Zhang San',
        HB: '18',
        TB: '-0.81',
        price: '2982.01',
        address: 'No. 1516, Jinshajiang Road, Putuo District, Shanghai'
      }],
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

This is the end of this article about vue + element dynamic multiple headers and dynamic slots. For more related vue + element dynamic multiple headers and dynamic slots, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: