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 图片上传预览-兼容标准
Jun 01 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
在小程序中推送模板消息的实现方法
Jul 22 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 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
下载文件的点击数回填
2006/10/09 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php错误日志简单配置方法
2016/07/11 PHP
php常用的工具开发整理
2019/09/26 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
拉丁舞学习者的自我评价
2013/10/27 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
怎样写离婚协议书
2014/09/10 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
护士求职自荐信范文
2015/03/04 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js