Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用

在Vue中使用v-for循环一个数组/对象时，如果再使用v-if，那么会提示使用计算属性(能正常使用)，因为Vue中是不提倡v-for与v-if同时使用的。
在我的项目中也遇到了问题
不过翻看文档解决了
修改前：

<el-table-column
v-for="(item, index) in columns"
:prop="item.prop"
:key="index"
align="center"
:width="item.width"
:label="item.label"
v-if="item.show"
>
></el-table-column>
1
2
3
4
5
6
7
8
9
10
编辑器提示：vue/no-use-v-if-with-v-for] The 'columns' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue

修改后：

<template v-for="(item, index) in columns">
<el-table-column
:prop="item.prop"
:key="index"
align="center"
:width="item.width || '' "
:label="item.label"
v-if="item.show"
>
</el-table-column>
</template>
1
2
3
4
5
6
7
8
9
10
11
即使用template标签包裹即可，v-for 写在template 上，v-if 绑定在需要循环的元素之上即可
---------------------

转载于:https://www.cnblogs.com/liyanyan665/p/11192635.html

Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用相关推荐

elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
elementUI中，操作表格单行的dom-锁定和解锁——$nextTick用法-dom根据数据改变而改变
elementUI中,操作表格单行的dom-锁定和解锁--$nextTick用法-dom根据数据改变而改变 1.$nextTick应用场景需要在视图更新之后,基于新的视图进行操作.即:数据改变,do ...
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象自我记录. Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做除了使 Vue 变 ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...
vue+elementUI中使用Echarts （懒人无脑版）
vue+elementUI中使用Echarts (懒人无脑版)+(史上最强版) 前言一.Echarts 1.提供一个Echarts 网站随去随用 http://img.9cfcf.com/#tp- ...
Vue.js 中的渲染函数是什么？如何使用渲染函数？
Vue.js 中的渲染函数是什么?如何使用渲染函数? Vue.js 是一款流行的前端框架,它提供了许多方便的工具和 API,用于构建交互式的用户界面.其中,渲染函数是 Vue.js 中一个强大的工具, ...
vue+elementui中使用echarts给柱形图添加背景色
vue+elementui中使用echarts给柱形图添加背景色首先使用npm安装echarts npm install echarts --save //or(或者使用) cnpm install ...
vue 结合原生tabe 渲染表格实现固定头部、固定右侧、单选按钮、单元格拖拽监听位置
1.vue 结合原生tabe 渲染表格实现固定头部.固定右侧.单选按钮(避免el-table 数据量大卡顿) // table.vue <template><div id=&qu ...

Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用

Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用相关推荐

最新文章

热门文章