vue动态添加事件的问题

Question

项目是vue+element-ui的表格，是一个多级表头，项目中有很多多级表头就写了公用组件，遍历传过来的数据

<el-table-column v-for="(data,index) in columnsTable"
                         :label="data.tierData.titleName"
                         :key="index"
                         v-if="color"
                         align="center">

            <el-table-column v-for="(list,index) in data.tierData.content"
                           :key="list.text"
                           :label="list.text"
                           :prop="list.dataIndex">
              <template scope="scope">
                {{scope.row[list.dataIndex]}}
              </template>
            </el-table-column>
      </el-table-column>

---

我的问题是，现在需求是有一个选择器可以控制隐藏一列表格，例如：选择地址，表格中这个多级的列都要隐藏，还请大家给个思路

Answer 1

看你给的代码是两级表头

data:{
    firstHeadHidden: '',
    secondHeadHidden: ''
}

<el-table-column v-for="(data,index) in columnsTable"
                         :label="data.tierData.titleName"
                         :key="index"
                         v-if="color || data.tierData.titleName !== firstHeadHidden"
                         align="center">
  <el-table-column v-for="(list,index) in data.tierData.content" 
                   :key="list.text" 
                   :label="list.text" 
                   :prop="list.dataIndex"
                   v-if="list.text !== secondHeadHidden">
    <template scope="scope">
      {{scope.row[list.dataIndex]}}
    </template>
  </el-table-column>
</el-table-column>

Answer 2

我想到就是控制你的content，你点地址就把地址的data从content中拿出来，这样你渲染的就不包含地址了，选择其他的再把其他的data拿出来，同时把地址的data放回去