el-table-column使用v-if 隐藏列显示异常问题

最新推荐文章于 2025-04-09 16:08:29 发布

菜鸟学编程

最新推荐文章于 2025-04-09 16:08:29 发布

阅读量6.2k

点赞数 7

分类专栏： # Vue 文章标签： vue.js elementui el-table-column v-if

本文链接：https://blog.youkuaiyun.com/gtosky4u/article/details/127531435

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

因业务需求，需要在点击按钮时隐藏列。于是在 el-table-column 中使用 v-if ，但是导致前一列显示异常的问题。

不显示【操作】列时，【审核日期】列的值未能正常显示。

 <el-table ref="record" v-loading="loading" :data="dataCustomer" row-key="id" stripe border :height="tableHeight - 250" :default-sort="{prop: queryParams.orderby, order: queryParams.sort}" @sort-change="handleSortable" @row-dblclick="showDetails">
        <el-table-column type="index" :index="handleIndexCalc" label="#" align="center" />
        <el-table-column sortable prop="voucherNo" align="center" :show-overflow-tooltip="true" label="凭证号" width="150" />
        <el-table-column sortable prop="createTime" align="center" :show-overflow-tooltip="true" label="制单日期" width="180" />
        <el-table-column sortable prop="createName" :show-overflow-tooltip="true" align="center" label="制单人" width="120" />
        <el-table-column v-if="queryParams.isAudit" sortable prop="auditName" :show-overflow-tooltip="true" align="center" label="审核人" width="120" />
        <el-table-column v-if="queryParams.isAudit" sortable prop="auditTime" :show-overflow-tooltip="true" align="center" label="审核日期" width="180" />
        <el-table-column v-if="!queryParams.isAudit" label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button v-if="!queryParams.isAudit" v-permission="['PRIV_GOODS_RECORD_UPDATE']" size="mini" icon="el-icon-mobile-phone" @click="handleEditRecord(scope.row)">编辑</el-button>
            <el-button v-if="!queryParams.isAudit" v-permission="['PRIV_GOODS_RECORD_DELETE']" size="mini" icon="el-icon-delete" @click="handleDeleteRecord(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

解决方法：给使用了v-if的【操作】列，加一个固定的key值，或循环渲染key即可

如： key="1" 或 : key="Math.random()"

 <el-table ref="record" v-loading="loading" :data="dataCustomer" row-key="id" stripe border :height="tableHeight - 250" :default-sort="{prop: queryParams.orderby, order: queryParams.sort}" @sort-change="handleSortable" @row-dblclick="showDetails">
        <el-table-column type="index" :index="handleIndexCalc" label="#" align="center" />
        <el-table-column sortable prop="voucherNo" align="center" :show-overflow-tooltip="true" label="凭证号" width="150" />
        <el-table-column sortable prop="createTime" align="center" :show-overflow-tooltip="true" label="制单日期" width="180" />
        <el-table-column sortable prop="createName" :show-overflow-tooltip="true" align="center" label="制单人" width="120" />
        <el-table-column v-if="queryParams.isAudit" sortable prop="auditName" :show-overflow-tooltip="true" align="center" label="审核人" width="120" />
        <el-table-column v-if="queryParams.isAudit" sortable prop="auditTime" :show-overflow-tooltip="true" align="center" label="审核日期" width="180" />
        <el-table-column v-if="!queryParams.isAudit" key="1" label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button v-if="!queryParams.isAudit" v-permission="['PRIV_GOODS_RECORD_UPDATE']" size="mini" icon="el-icon-mobile-phone" @click="handleEditRecord(scope.row)">编辑</el-button>
            <el-button v-if="!queryParams.isAudit" v-permission="['PRIV_GOODS_RECORD_DELETE']" size="mini" icon="el-icon-delete" @click="handleDeleteRecord(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>