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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
js选择器全面解析
Jun 27 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python切片工具pillow用法示例
2018/03/30 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python基础 range的用法解析
2019/08/23 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
详解Python中的Lock和Rlock
2021/01/26 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
社区网格化管理实施方案
2014/03/21 职场文书
幼儿园开学寄语
2014/04/03 职场文书
投标服务承诺书
2014/05/28 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
换届选举主持词
2015/07/03 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript