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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
javascript中万恶的function实例分析
May 25 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
详解package.json版本号规则
Aug 01 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模板技术原理【一】
2008/01/10 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
取得传值的函数
2006/10/27 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
vue多层嵌套路由实例分析
2019/03/19 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python实现宿舍管理系统
2019/11/22 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
《在山的那边》教学反思
2014/02/23 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
教师聘用意向书
2015/05/11 职场文书
导游词之丽江普济寺
2019/10/22 职场文书