element-ui自定义table表头，显示异常

Question

使用render-header自定义table表头，表头中添加3个button，点击不同的button表格显示不同的列，但是不知道为什么，列数必须相同，列数不同时点击button表格显示就异常了

html:

<div class="data-container" style="width: 100%">
    <el-table ref="multipleTable" :data="tableList" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" stripe id="table">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column type="index" width="60" align="center">
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" width="170" align="center">
      </el-table-column>
      <el-table-column prop="deviceId" label="设备ID" width="150" align="center">
      </el-table-column>
      <el-table-column prop="status" label="运行状态" width="100" align="center">
        <template scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{scope.row.status===1?'运行中':'关闭'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :render-header="renderHeader" align="center">
        <el-table-column v-for="col in table" :prop="col.prop" :label="col.label">
        </el-table-column>
      </el-table-column>
      <el-table-column label="更多" align="center" min-width="150">
        <template scope="scope">
          <el-button type="success" size="small">详情</el-button>
          <el-button size="small" type="primary">操作</el-button>
        </template>
      </el-table-column>
    </el-table>

js:

<script>
export default {
  data: () => ({
    tableList: [{
      deviceName: '一代',
      deviceId: 'KG-12345678',
      status: 1,
      time1: '1111',
      filter1: '1111',
      time2: '2222',
      filter2: '2222',
      time3: '3333',
      filter3: '3333',
      pm2d51: '2333',
      pm2d52: '2333',
      pm2d53: '2333'
    }],
    table: [{ prop: 'time1', label: '时间1' },
    { prop: 'filter1', label: '滤网1' },
    { prop: 'pm2d51', label: 'PM2.51' }]
  }),
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleHeader1() {
      this.table.splice(0, this.table.length)
      this.table = [
        { prop: 'time1', label: '时间1' },
        { prop: 'filter1', label: '滤网1' }
      ]
    },
    handleHeader2() {
      this.table.splice(0, this.table.length)
      this.table = [
        { prop: 'time2', label: '时间2' },
        { prop: 'filter2', label: '滤网2' },
        { prop: 'pm2d52', label: 'PM2.52' }
      ]
    },
    handleHeader3() {
      this.table.splice(0, this.table.length)
      this.table = [
        { prop: 'time3', label: '时间3' },
        { prop: 'filter3', label: '滤网3' },
        { prop: 'pm2d53', label: 'PM2.53' }
      ]
    },
    renderHeader(createElement, { _self }) {
      return createElement(
        'div',
        {
          'class': 'renderTableHead'
        },
        [
          createElement('el-button', {
            attrs: { type: 'text' },
            on: { click: this.handleHeader1 }
          }, ['设备状态']
          ),
          createElement('el-button', {
            attrs: { type: 'text' },
            on: { click: this.handleHeader2 }
          }, ['设备数据']
          ),
          createElement('el-button', {
            attrs: { type: 'text' },
            on: { click: this.handleHeader3 }
          }, ['设备信息']
          )
        ]
      );
    }
  }
}
</script>

多次点击后table显示异常：

http://jsfiddle.net/dayang/wq...

Answer 1

都要三列
handleHeader1() {

            //this.table.splice(0, this.table.length)
            this.table = [
                { prop: 'time1', label: '时间1' },
                { prop: 'filter1', label: '滤网1' },
                { prop: 'pm2d51', label: 'PM2.52' }
            ]
        },