vue-ele 之 table的动态表头

vue-ele 之 table的动态表头

DynaTable.vue

<!--
描述：
  作者：xzl
  时间：06月09日110908
-->
<template>
  <div>
    <div class="filter-container">
      <el-select v-model="selectVal" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <button @click="reset">重置</button>
    </div>
    <el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="name" label="fruitName" width="180" />
      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit" min-width="150">
        <template slot-scope="scope">
          {{ scope.row[fruit] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
const defaultFormThead = ['apple', 'banana']
const defaultTableData = [
  {
    name: 'fruit-1',
    apple: 'apple-10',
    banana: 'banana-10',
    orange: 'orange-10'
  },
  {
    name: 'fruit-2',
    apple: 'apple-20',
    banana: 'banana-20',
    orange: 'orange-20'
  }
]
const appleHead = ['apple1', 'apple2', 'apple3', 'apple4']
const appleTable = [
  {
    name: 'fruit-1',
    apple1: 'apple-1',
    apple2: 'apple-2',
    apple3: 'apple-3',
    apple4: 'apple-4'
  },
  {
    name: 'fruit-2',
    apple1: 'apple-11',
    apple2: 'apple-21',
    apple3: 'apple-31',
    apple4: 'apple-41'
  }
]
const bananaHead = ['banana1', 'banana2', 'banana3', 'banana4']
const bananaTable = [
  {
    name: 'fruit-1',
    banana1: 'banana-1',
    banana2: 'banana-2',
    banana3: 'banana-3',
    banana4: 'banana-4'
  },
  {
    name: 'fruit-2',
    banana1: 'banana-11',
    banana2: 'banana-21',
    banana3: 'banana-31',
    banana4: 'banana-41'
  }
]
const orangeHead = ['orange1', 'orange2', 'orange3', 'orange4']
const orangeTable = [
  {
    name: 'fruit-1',
    orange1: 'orange-1',
    orange2: 'orange-2',
    orange3: 'orange-3',
    orange4: 'orange-4'
  },
  {
    name: 'fruit-2',
    orange1: 'orange-11',
    orange2: 'orange-21',
    orange3: 'orange-31',
    orange4: 'orange-41'
  }
]
export default {
  name: 'DynaTable',
  components: {},
  data() {
    return {
      options: [{
        value: '01',
        label: 'apple'
      }, {
        value: '02',
        label: 'banana'
      }, {
        value: '03',
        label: 'orange'
      }],
      selectVal: '',
      tableData: defaultTableData, // table 主体 的数据
      key: 1, // table key
      appleHead: appleHead,
      bananaHead: bananaHead,
      orangeHead: orangeHead,
      formThead: defaultFormThead // table 表头 数据
    }
  },
  watch: {
    // 监听 下拉选中的值
    selectVal(valArr) {
      // console.log('valArr', valArr)
      switch (valArr) {
        case '01':
          this.formThead = this.appleHead
          this.tableData = appleTable
          break
        case '02':
          this.formThead = this.bananaHead
          this.tableData = bananaTable
          break
        case '03':
          this.formThead = this.orangeHead
          this.tableData = orangeTable
          break
        default:
          this.formThead = ['apple', 'banana', 'orange']
          this.tableData = defaultTableData
          break
      }
      this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },
  methods: {
    reset() {
      this.selectVal = ''
    }
  }
}
</script>
<style lang="scss" scoped></style>

效果