使用elementUI的表格table给列添加样式

 更新时间:2023年10月25日 09:10:03   作者:跳跳的小古风  
这篇文章主要介绍了使用elementUI的表格table给列添加样式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

需求

针对数字指标点击时选中图标并高亮,再次点击时取消选中图标,取消高亮

同时点击行时放开列高亮 点击列时放开行高亮

解决思路及方案

该element表格目前只有直接行点击高亮函数 所以我们使用

@header-click+:header-cell-class-name+:class-name实现对表头图标和列的样式改变

通过点击表格头时对指定数据进行更改来渲染样式类

	<el-table
		:data="saveTableData.tableData"
		:key="datarefersh" //通过改变此属性进行数据重新渲染
		@header-click="handleHeaderClick"
		highlight-current-row
		@current-change="handleCurrentRowChange"
		ref="table"
		:header-cell-class-name="handlemyclass"
		>
			<el-table-column
				:render-header="labelHead"
				v-for="(item, index) in eleTable.headerData"
				:column-key="item.idenCode"
				:prop="item.idenCode"
				:label="item.idenName"
				:key="index"
				:idenType="item.idenType"
				:class-name="item.current ? 'cellSelected' : ''"
				></el-table-column>
             </el-table>
 	         data() {  
 	            choose:0,//根据点击表头时将表头的code值赋值给choose进行判断
 	             datarefersh: true,
 	        }
             init(){
                this.eleTable.headerData.map(o => {
				o.current = false;//初始化时将渲染的表头每一项添加current属性,列根据current判断是否点击,从而高亮它
				});
             },
            //点击行事件
            handleCurrentRowChange(val) {
		     	this.table.selectedColumn={} //清空列数据
				let list = false;
				//判断是否有列选中
				this.eleTable.headerData.map(o => {
					if (o.current === true) {
						list = true;
					}
				});
				
				if (list === true) {
				    //有列选中时,将列的current属性重置为false
					this.eleTable.headerData.map(o => {
						o.current = false;
					});
					this.datarefersh = !this.datarefersh;
					setTimeout(() => {
						this.$refs["table"].setCurrentRow(val);
						this.choose=0//将表格头图标选中状态也重置
						this.table.selectedRow = val;
					}, 100);
				} else {
					 this.table.selectedRow = val;
				}
			},
			//点击表头事件
			handleHeaderClick(column, event) {
				this.table.selectedRow={} //清空行数据
				let idenCode = column.property;
				for (let i in this.eleTable.headerData) {
				if (this.eleTable.headerData[i].idenCode == idenCode) {
				//该列为选中的列
					let headData = this.eleTable.headerData[i];
				if (this.table.selectedColumn.property == idenCode) {
						//取消选择
						this.table.selectedColumn = {};
						headData.current = false;
						this.choose=0
						this.datarefersh = !this.datarefersh;
				} else {
						this.table.selectedColumn = column;
						headData.current = true;
						this.choose=column.property
						this.datarefersh = !this.datarefersh;
				   }
		    	} else {
						return;
						}
					}
				}
			},
	//表头函数类
			handlemyclass: function({ column}) 
			 {
			let text=[]
				//动态给表格头是数字属性的添加未选中图标
			for(var i in this.saveTableData.tableData[0]){
			if(typeof(this.saveTableData.tableData[0][i])==="number"){
					text.push(i)
				}		 
			}
		//不在数字指标数组内的执行testB类,只高亮
		//在指标内且choose为当前的选中code的执行选中类(testC),不是当前选中的执行未选中内testA
			if (text.includes(column.columnKey)) {
	           return   this.choose===column.columnKey?"testC":"testA";
				} else {
			 return "testB";
				}		
			},
//第二种方法
			//点击表头事件
			handleHeaderClick(column, event) {
				let idenCode = column.property;
				for (let i in this.eleTable.headerData) {
					if (this.eleTable.headerData[i].idenCode == idenCode) {
						let headData = this.eleTable.headerData[i];
						if (headData.idenType == 2) {
							if (
								headData.hasOwnProperty("isIndCalculate") &&
								headData.isIndCalculate
							) {
								//指标运算的列不参与单列运算
								return;
							}
							//数字指标
							let th = "";
							if ($(event.target).hasClass("is-leaf")) {
								th = $(event.target);
							} else {
								th = $(event.target)
									.parent()
									.parent();
							}
							let className = $(th).attr("class");
							let newName=className.replace("el-table__cell", "");
							let newclassName = newName.replace("is-leaf", "");
							$(".tableLayer tr th, .tableLayer tr td").removeClass("active");
							if (this.table.selectedColumn.property == idenCode) {
								//取消选择
								this.table.selectedColumn = {};
								headData.current = false;
							} else {
								this.table.selectedColumn = column;
								$("." + newclassName).addClass("active");
							}
						} else {
							return;
						}
					}
				}
			},
	.testA,.testB,.testC {
		background: #257ac1!important;
		color: "#fff";
	}
	.testA::before{
		display: block;
		content: '';
		background: url("../../../../../../assets/select-bg/setA.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
       right: 8px;
       top: 12px;
       width: 12px;
       height: 12px;
	}
		.testC::before{
		display: block;
		content: '';
		background: url("../../../../../../assets/select-bg/setB.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
    right: 8px;
    top: 12px;
    width: 12px;
    height: 12px;
	}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3新状态管理工具实例详解

    Vue3新状态管理工具实例详解

    Vue3公布曾经有一段时间了,它采纳了新的响应式零碎,而且构建了一套全新的 Composition API,下面这篇文章主要给大家介绍了关于Vue3新状态管理工具的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue中swiper开启loop后,点击事件不响应的解决方案

    vue中swiper开启loop后,点击事件不响应的解决方案

    这篇文章主要介绍了vue中swiper开启loop后,点击事件不响应的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • node+vue前后端分离实现登录时使用图片验证码功能

    node+vue前后端分离实现登录时使用图片验证码功能

    这篇文章主要介绍了node+vue前后端分离实现登录时使用图片验证码,记录前端使用验证码登录的过程,后端用的是node.js,关键模块是svg-captcha,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue 搭建后台系统模块化开发详解

    vue 搭建后台系统模块化开发详解

    这篇文章主要介绍了vue 搭建后台系统模块化开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue实现简单选项卡功能

    Vue实现简单选项卡功能

    这篇文章主要为大家详细介绍了Vue实现简单选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue如何进行动画的封装

    vue如何进行动画的封装

    这篇文章主要介绍了vue如何进行动画的封装,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • Vue.component的属性说明

    Vue.component的属性说明

    这篇文章主要介绍了Vue.component的属性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue实现未登录跳转到登录页的示例代码

    Vue实现未登录跳转到登录页的示例代码

    本文主要介绍了Vue实现未登录跳转到登录页的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 使用Karma做vue组件单元测试的实现

    使用Karma做vue组件单元测试的实现

    这篇文章主要介绍了使用Karma做vue组件单元测试的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 一文详解Vue中nextTick的原理与作用

    一文详解Vue中nextTick的原理与作用

    Vue的nextTick方法是用于在DOM更新后执行回调的工具函数,它的作用是在当前JavaScript执行环境中延迟执行回调,以确保在下次DOM更新循环之前,可以访问到更新后的DOM,本文就给大家介绍一下Vue nextTick原理与作用,需要的朋友可以参考下
    2023-08-08

最新评论