美文网首页
3.el-table-column v-if条件渲染

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

作者: _leon__ | 来源:发表于2019-04-28 09:28 被阅读0次

    当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条件渲染

          本文链接:https://www.haomeiwen.com/subject/oovrnqtx.html