zoukankan      html  css  js  c++  java
  • element动态添加表头的正确姿势,三步完成动态表头

    1. 第一步循环 el-table-column

    <el-table-column
      v-if="item.show"
      v-for="(item, index) in tableColumn"
      :key="index"
      :label="item.name"
      :prop="item.value"
      align="center"
      show-overflow-tooltip
      sortable="custom"
    />

    // this.state.tableColumn:[{name: '客户名', value: 'cusName', show: true}, {name:'年龄', value: 'age', show: true}, {name:'手机号', value: 'phone', show: false}]

    2. 第二步  点击按钮动态添加一个(手机号)表头

    // 动态表头保存
    handleSaveSetTable() {
      this.$set(this.tableColumn , 2, { name:'手机号', value: 'phone', show: true })
      this.flag = !this.flag
    }
    
    // 改变this.flag来触发重新做diff运算渲染dom,这样解决了一些固定表头可能出现错乱问题
    

    3.第三步,在表格最外层容器添加key

  • 相关阅读:
    第九周作业
    第八周作业
    第七周作业
    作业2
    作业1
    2019春总结作业
    第十四周总结
    十二周编程总结
    十一周编程总结
    第十周作业
  • 原文地址:https://www.cnblogs.com/wangrui38/p/11655190.html
Copyright © 2011-2022 走看看