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 相关文章推荐
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
详解webpack进阶之loader篇
Aug 23 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
详解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静态类
2006/11/25 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
python计算N天之后日期的方法
2015/03/31 Python
Python3遍历目录树实现方法
2015/05/22 Python
python验证码识别的实例详解
2016/09/09 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers