3.el-table-column v-if条件渲染

当el-table的某些列动态变化(v-if)的时候，经常会遇到el-table-column条件渲染出现报错的情况
报错内容：

h.$scopedSlots.default is not a function

究其原因，这是因为在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。而原本这些标签每一个都是独立的，于是需要添加key来做区分！
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，这就是问题所在，所以，通过key去标识一下当前行是唯一的，不许复用，就行了。
代码示例如下：

添加 :key="Math.random()"

使用：

<el-table @sort-change="changesort4" ref="tableData4" border :data="tableData4">
  <el-table-column fixed align="center" type=index label="序号" width="40" :key="Math.random()"/>
  <el-table-column align="center" prop="regionname" width="110" :show-overflow-tooltip="true" label="运营中心" :key="Math.random()"/>
  <el-table-column align="center" prop="agentname" width="110" :show-overflow-tooltip="true" label="服务商" :key="Math.random()"/>
  <el-table-column align="center" prop="businessname" width="110" :show-overflow-tooltip="true" label="商家" :key="Math.random()"/>
  <el-table-column align="center" prop="storename" width="110" :show-overflow-tooltip="true" label="门店" v-if="subjectForm4.groupBy===1" :key="Math.random()"/>
  <el-table-column align="center" prop="billfee" label="订单金额" sortable="custom" width="110" :key="Math.random()"/>
  <!--<el-table-column align="center" prop="customername" label="会员" width="75" />-->
  <el-table-column label="配送费">
    <el-table-column align="center" prop="customerDeliverFee" label="顾客支付" sortable="custom" width="110" :key="Math.random()"/>
    <el-table-column align="center" prop="busBearFee" label="商家承担" sortable="custom" width="110" :key="Math.random()"/>
    <el-table-column align="center" prop="subsidyfee" label="骑手小费" sortable="custom" width="110" :key="Math.random()"/>
    <el-table-column align="center" prop="sumFee" label="合计扣除" sortable="custom" width="110" :key="Math.random()"/>
  </el-table-column>
  <el-table-column align="center" prop="serviceFee" label="外卖抽成" sortable="custom" width="110" :key="Math.random()"/>
  <el-table-column align="center" prop="calfee" label="合计" sortable="custom" width="110" :key="Math.random()"/>
  <el-table-column align="center" prop="balance" label="服务费余额" sortable="custom" width="110" :key="Math.random()"/>
  <el-table-column fixed='right' align="center" label="操作" v-if="subjectForm4.groupBy===2" :key="Math.random()">
    <template slot-scope="scope">
      <el-button @click="goListByStore(scope.row)" type="text" size="small">查看</el-button>
    </template>
  </el-table-column>
</el-table>

3.el-table-column v-if条件渲染

推荐阅读更多精彩内容