elementui表格自定义指令控制显示哪些列可以拖动

news/2024/10/23 9:26:51/
Vue.directive('tableBorder', function (el, {value}) {// value允许传字符串数字和数组el.classList.add('z_table_hasBorder')let hasStyle = el.querySelector('style')if(hasStyle){hasStyle.remove()}let style = document.createElement('style')let str = `.z_table_hasBorder  .el-table__cell{border-width: 0px;}`let reg = /^[0-9]*$/if(typeof value === 'string' || typeof value === 'number'){let test = reg.test(value)value  = test ? [Number(value)] : []}else if(!Array.isArray(value)){value = []}let html =value.reduce((prev,item)=>{let test = reg.test(item)return prev += test ? `.z_table_hasBorder tr .el-table__cell:nth-of-type(${item}){border-width: 1px;}` : ''},str)style.innerText = htmlel.appendChild(style)
})

用法

<el-table:data="tableData"borderv-tableBorder="[2,4]"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column>

效果

在这里插入图片描述


http://www.ppmy.cn/news/1230129.html

相关文章

见面礼——图论

给定一个 n 个点 n 条边的无向图&#xff0c;你需要求有多少种选择图上的一个点 p 和一条边 (x,y) 的方案&#xff0c;使得删去 (x,y) 后图变成一棵树&#xff0c;且这棵树以 p 为根时每个节点的儿子个数均不超过 3。保证至少存在一种这样的方案。 Input 输入的第一行一个整数…

微信小程序内嵌h5页面,实现动态设置顶部标题的功能

一、需求描述 使用HBuilder X作为开发工具&#xff0c;vue作为开发语言&#xff0c;开发微信小程序。微信小程序页面内嵌h5页面&#xff0c;即<web-view></web-view>标签。通过设置不同url连接地址&#xff0c;设置不同的标题。 二、失败做法 页面A嵌入h5页面&a…

JSP页面文本展示正常 但定义在java代码中的内容 输出在页面上会变成问号 问题解决

这里 我直接写在界面上的内容就是正常的 但是 java代码中定义的内容 就会变成问号 造成这个情况的原因可能是多样的 首先要确保JDK没问题 然后是 页面顶部配置 <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-…

【Python】给定一个长度为n的数列,将这个数列按从小到大的顺序排列。1<=n<=200

2、问题描述 给定一个长度为n的数列&#xff0c;将这个数列按从小到大的顺序排列。1<n<200 样例输入 5 8 3 6 4 9 样例输出 3 4 6 8 9 n int(input()) a list(map(int,input().split())) a.sort() for i in a:print(i,end ) 运行结果&#xff1a;

Web 自动化神器 TestCafe(二)—元素定位篇

今天主要给大家介绍一下testcafe这个框架元素定位的方法。 一、CSS 选择器定位 使用 testcafe 对元素进行操作的时候&#xff0c;我们可以直接通过 CSS 选择器指定要操作的元素&#xff0c;比如&#xff0c;点击元素&#xff0c;input 输入文本内容&#xff0c;如下&#xff1…

Kafka学习笔记(一)

目录 第1章 Kafka概述1.1 消息队列&#xff08;Message Queue&#xff09;1.1.1 传统消息队列的应用场景1.1.2 消息队列的两种模式 1.2 定义 第2章 Kafka快速入门2.1 安装部署2.1.1 集群规划2.1.2 jar包下载2.1.3 集群部署 2.2 Kafka命令行操作 第3章 Kafka架构深入3.1 Kafka工…

在VSCode创建vue项目,出现“因为在此系统上禁止运行脚本”问题

问题&#xff1a;vue : 无法加载文件 C:\Users\***\***\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 ht tps:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 解决&#xff…

CISP全真模拟测试题(一)

免责声明 文章仅做经验分享用途,切勿当真,未授权的攻击属于非法行为!利用本文章所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,作者不为此承担任何责任,一旦造成后果请自行承担!!! 1、信息安全发展各阶段中,下面哪一项是通信安全阶段主要面…