vue iview 隐藏Table组件里的某一列操作


Posted in Javascript onNovember 13, 2020

1、假设我要隐藏columns里的 “账户组名称”

columns: [
{
 type: 'selection',
 width: 60,
 align: 'center'
},
{
 title: '账号ID',
 key: 'accountIdString'
},
{
 title: '账号名称',
 key: 'accountName'
},
{
 title: '账户组名称',
 key: 'accountGroupName'
}]

2、根据各自需求去判断

示例:如果是单账户表标题显示"账号ID、账号名称" 如果是账户组表标题显示"账户组名称"

if(this.queryCostComparisonData[i].accountGroupName){
 this.columns = this.columns.filter(col => col.key !== 'accountIdString' );
 this.columns = this.columns.filter(col => col.key !== 'accountName' );
 }else{
 this.columns = this.columns.filter(col => col.key !== 'accountGroupName' );
 }

补充知识:vue——动态控制表格列的显示和隐藏

如下所示:

vue iview 隐藏Table组件里的某一列操作

如图,为要实现的需求,即右键table的表头弹出菜单栏,通过勾选多选框的内容来控制表格列的显示和隐藏。

1. HTML部分(elemen-ui):

<el-table :data="list" border fit @header-contextmenu="contextmenu">
 <el-table-column v-if="colData[0].istrue" label="放射源ID" align="center" />
 <el-table-column v-if="colData[1].istrue" label="源自编号" align="center" />
 <el-table-column v-if="colData[2].istrue" label="类型" align="center" />
 <el-table-column v-if="colData[3].istrue" label="强度" align="center" />
 <el-table-column v-if="colData[4].istrue" label="还源人" align="center" />
</el-table>
<!--右键弹出的菜单内容-->
<!--动态计算菜单出现的位置-->
<div v-show="menuVisible" :style="{top:top+ "px",left:left+ "px"}" class="menu1">
 <el-checkbox-group v-model="colOptions">
 <el-checkbox v-for="item in colSelect" :key="item" :label="item" />
 </el-checkbox-group>
</div>

(1) 通过v-if="colData[0].istrue",来判断表格列的状态

(2) @header-contextmenu是element-ui的table组件提供的事件,当表格表头被右键点击时触发该事件

2. Data部分:

data() {
 return{
 menuVisible: false, //右键菜单的显示与隐藏
 top: 0, //右键菜单的位置
 left: 0,
 colOptions: ['放射源ID', '源自编号', '类型', '强度', '还源人'], //多选框的选择项
 colSelect: ['放射源ID', '源自编号', '类型', '强度', '还源人'], //多选框已选择的内容,即表格中显示的列
 // istrue属性存放列的状态
 colData: [
 { title: '放射源ID', istrue: true },
 { title: '源自编号', istrue: true },
 { title: '类型', istrue: true },
 { title: '强度', istrue: true },
 { title: '还源人', istrue: true }
 ]
 }
}

3. Js部分:

(1) 在watch部分监听选中项的变化

<script>
watch: {
 colOptions(newVal, oldVal) {
 if (newVal) { //如果有值发生变化,即多选框的已选项变化
 var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) // 未选中
 this.colData.filter(i => {
  if (arr.indexOf(i.title) !== -1) {
  i.istrue = false
  } else {
  i.istrue = true
  }
 })
 }
 }
 },
 </script>

(2)

methods: {
 contextmenu(row, event) {
 //先把菜单关闭,目的是第二次或者第n次右键鼠标的时候 它默认的是true
 this.menuVisible = false 
 // 显示菜单
 this.menuVisible = true 
 window.event.returnValue = false //阻止浏览器自带的右键菜单弹出
 //给整个document绑定click监听事件, 左键单击任何位置执行foo方法
 document.addEventListener('click', this.foo) 
 //event对应的是鼠标事件,找到鼠标点击位置的坐标,给菜单定位
 this.top = event.clientY
 this.left = event.clientX
 },
 foo() {
 this.menuVisible = false //关闭菜单栏
 document.removeEventListener('click', this.foo) //解绑click监听,很重要,具体原因可以看另外一篇博文
 }
 }

其中鼠标事件的返回值具体如下

vue iview 隐藏Table组件里的某一列操作

这里调用的clientX和clientY(鼠标点击位置相对于浏览器的坐标)来给菜单定位

4. CSS部分:

简单设置了一下菜单的样式,具体可以看情况修改

.menu1{
 position:fixed;
 height:auto;
 width:231px;
 border-radius: 3px;
 border: 1px solid #999999;
 background-color: #f4f4f4;
 padding: 10px;
 z-index: 1000
}
.el-checkbox{
 display:block;
 height:20px;
 line-height:20px;
 padding:0 5px;
 margin-right:0;
 font-size:12px;
 border: 1px solid transparent;
}
.el-checkbox:hover{
 border-radius: 3px;
 border: 1px solid #999999;
}

2019-9-25更新:

实际开发中一般表格列比较多的时候才会用到动态显隐。如果还是一条一条写el-table-column反而太过复杂,因此尝试了使用v-for来循环,亲测可用,具体代码如下~

<el-table
 border
 :data="list"
 highlight-current-row
 @header-contextmenu="contextmenu"
 >
 <el-table-column
 v-for="(item,index) in tableHeader"
 v-if="colData[index].istrue"
 :key="item.key"
 show-overflow-tooltip
 :label="item.label"
 :prop="item.key"
 >
 <template slot-scope="scope">
  <span v-if="(item.key==='qyrq'||item.key==='ccrq'||item.key==='zcsj')&&scope.row[item.key]">{{ scope.row.qyrq|parseTime() }}</span>
  <span v-else>{{ scope.row[item.key] }} </span>
 </template>
 </el-table-column>
 </el-table>
dara() {
 return{
 tableHeader: [
  { label: '放射源ID', key: 'id' },
  { label: '源自编号', key: 'zbh' },
  { label: '类型', key: 'kind' },
  { label: '强度', key: 'qd' },
  { label: '还源人', key: 'user' },
 ]
 }}

需要注意的是,这里的tableHeader、colOptions、colSelect、colData中列的顺序需要一一对应不可错乱!

以上这篇vue iview 隐藏Table组件里的某一列操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js简单实现竖向tab选项卡的方法
May 04 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 #Javascript
vue print.js打印支持Echarts图表操作
Nov 13 #Javascript
vue 中使用print.js导出pdf操作
Nov 13 #Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 #Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 #Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 #Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 #Javascript
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python flask安装和命令详解
2019/04/02 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
大学生自我评价怎样写好
2013/10/23 职场文书
村容村貌整治方案
2014/05/21 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题