当前位置: 首页 > ai >正文

el-table-v2修改表头、单元格、表格整体的宽度、高度样式

 有关部分的完整代码:

//template里面<div style="height: calc(100% - 60px); width: 100%"><el-auto-resizer><template #default="{ height, width }"><el-table-v2v-model:expanded-row-keys="expandedRowKeys":columns="columns":data="changedTableData":width="width":height="height"expand-column-key="name"row-key="id":header-cell-props="headerClassName"><template #cell="{ column, rowData }"><template v-if="column.key == 'isConfig'"><el-checkboxv-model="changedTableData.isConfig":disabled="!isEditMode"/></template></template></el-table-v2></template></el-auto-resizer></div>//script里面// 列定义
const columns = [{key: "isConfig",dataKey: "isConfig",title: "是否为基准配置",width: "10%",style: {backgroundColor: "#fffacd",//-----------使用这个给单元格修改样式},},{key: "baseline",dataKey: "baseline",title: "基准数量",width: "10%",style: {backgroundColor: "#fffacd",},},
];//和header-cell-props配合使用,修改某一列的header样式
const headerClassName = ({ column, style }) => {if (column.key == "isConfig" || column.key == "baseline") {style.backgroundColor = "#fffacd";}
};

1.修改某一个表头的样式:header-cell-props和对应的函数配合着使用,函数可以拿到一些参数,具体有什么参数可以查看elementUI的文档

2.修改单元格的样式:

方法一:给el-table-v2表格的单元格设置边框 


(第一步)给el-table-v2添加下面这一行,注意冒号也是需要的。:cell-props="cellProps"
(第二步)在script中加下面的代码
const cellProps = ({ column }) => {return {style: {borderRight: "1px solid #ebeef5", // 列边框(右侧)borderBottom: "1px solid #ebeef5", // 行边框(底部)},};
};

方法二:直接在列的设置里面添加style,能做到什么样子,我不清楚,但是对于背景颜色的设置是成功了的。

// 列定义
const columns =[{key: "isConfig",dataKey: "isConfig",title: "是否为基准配置",width: "10%",style: {backgroundColor: "#fffacd",},},{key: "baseline",dataKey: "baseline",title: "基准数量",width: "10%",style: {backgroundColor: "#fffacd",},]

3.设置整体表格的宽度和高度

关于这个我是想要实现表格占满整个页面,el-table-v2中的width和height只能接受具体的数字,如果写“100%”,会报错。我是使用的el-auto-resizer去实现,注意它外面还需要嵌套一层,并给这一层赋上宽度和高度。

 <div style="height: calc(100% - 60px); width: 100%"><el-auto-resizer><template #default="{ height, width }"><el-table-v2v-model:expanded-row-keys="expandedRowKeys":columns="columns":data="changedTableData":width="width":height="height"expand-column-key="name"row-key="id":header-cell-props="headerClassName"><template #cell="{ column, rowData }"><template v-if="column.key == 'isConfig'"><el-checkboxv-model="changedTableData.isConfig":disabled="!isEditMode"/></template></template></el-table-v2></template></el-auto-resizer></div>

希望对你们有用。

http://www.xdnf.cn/news/13368.html

相关文章:

  • Web 架构之微服务拆分原则与反模式
  • 网页组件强制设置右对齐
  • 基于拓扑的信任评级实现的车载异常检测框架
  • 从零实现一个红队智能体
  • linux内核编译问题记录
  • 润乾报表display value expression使用介绍
  • Redis GEO 52 位整数的经纬分布
  • 【基于阿里云上Ubantu(x86-64)系统部署配置K8s】
  • Docker环境安装Kafka、Flink、ClickHouse镜像
  • 海外打车代驾app评价系统框架搭建
  • 获取RadioButton的text,更换textview的text
  • C++笔记-C++11(二)
  • 【Unity优化】提高热更新和打包速度
  • Centos与RockLinux设置静态ip
  • 数据库管理与高可用-PostgreSQL日常维护
  • MongoDB入门指南:环境安装与基本操作
  • QGIS新手教程4:相交、缓冲区与合并操作详解(含实战案例)
  • 多头与空头:市场博弈的两面
  • 【2025最新】Adobe Illustrator下载保姆级安装教程(附官方下载链接)
  • ThinkPad 交换 Ctrl 键和 Fn 键
  • Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘xxx’)
  • RK3588开发笔记-GNSS-RTK模块调试
  • YOLO-World 部署踩坑记录
  • Linux611 libvirtb ;FTP vsftpd.conf部分配置文件
  • React 元素的生命周期
  • 从硬件视角审视Web3安全:CertiK CTO主持Proof of Talk圆桌论坛
  • GO 入门小项目-博客-结合Gin Gorm
  • 【面板数据】中国与世界各国农产品进出口贸易数据(2015-2024年)
  • 国内外数据要素标准有何不同?
  • K8S项目需求分析