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

因业务需求，需要在点击按钮时隐藏列。于是在 el-table-column 中使用 v-if ，但是导致前一列显示异常的问题。解决方法：给使用了v-if的【操作】列，加一个固定的key值，或循环渲染key即可。如： key="1" 或 : key="Math.random()"不显示【操作】列时，【审核日期】列的值未能正常显示。

菜鸟学编程

6019人浏览 · 2022-10-26 14:18:59

菜鸟学编程 · 2022-10-26 14:18:59 发布

因业务需求，需要在点击按钮时隐藏列。于是在 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>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport