兰州网站外包,西安广告设计与制作公司,电影网站怎么做关键词,广州免费景点element文档链接#xff1a;
https://element-plus.org/zh-CN/component/form.html
一、el-table表格行展开关闭箭头替换成加减号 注#xff1a;Vue3在样式中修改箭头图标无效#xff0c;可能我设置不对#xff0c;欢迎各位来交流指导 转变思路#xff1a;隐藏箭头…element文档链接
https://element-plus.org/zh-CN/component/form.html
一、el-table表格行展开关闭箭头替换成加减号 注Vue3在样式中修改箭头图标无效可能我设置不对欢迎各位来交流指导 转变思路隐藏箭头添加一行显示展开关闭所需图标
1、隐藏箭头
.el-table__expand-icon .el-icon svg {display: none;
}
此时只是箭头不可见但是箭头的占位还在显得很空
2、去掉箭头空白添加替换箭头的图标列
在显示展开内容的列标签中设置width1
el-table-column typeexpand width1 template #defaultpropsdiv classtableItem :style{ width: calc(100%)} el-table :dataprops.row.familyel-table-column typeindex width70 label排名 propname aligncenter/el-table-column propprojectNum label项目编号 alignleft/el-table-column propprojectName label项目名称 alignleft//el-table/div/template
/el-table-columnel-table-column width40 aligncenter template #defaultscope el-icon :size15 v-ifscope.row.expanded color#000000Minus//el-iconel-icon :size15 v-else color#000000Plus//el-icon/template/el-table-column
二、点击整行展开数据
表格数据
const tableData ref([{projectNum:YCA20241120001,id:5862458213,projectName:项目名称项目名称项目名称,month: 2024-10,expanded:false,family: [{projectNum:YCA20241120001,projectName:项目名称项目名称项目名称,},{projectNum:YCA20241120001,projectName:项目名称项目名称项目名称,}]},{id:5862456248,projectNum:YCA20241120001,projectName:项目名称项目名称项目名称,month: 2024-11,expanded:false,}
])
使用到el-table的三个属性含义请看element文档 row-keyid :expand-row-keysexpands row-clickclickRowHandle
el-table :datatableData v-loadingstate.loading selection-changeselectionChangHandlesort-changesortChangeHandle:borderfalse stylewidth: 100% row-keyid:expand-row-keysexpandsrow-clickclickRowHandle
/el-table
逻辑代码
const expands ref([])
//点击事件
const clickRowHandle (row: any) {row.expanded!row.expandedif (expands.value.includes(row.id)) {expands.value expands.value.filter(val val ! row.id)}else {expands.value.push(row.id)}
}
三、外部表格序号和排名序号对齐 设置表格el-table-column的padding-left和magin-left是无效的
解决方法 :cell-styleproductiontableStyle :headerCellStyleproductiontableStyle
el-table-column typeexpand width1 template #defaultpropsdiv classtableItem :style{ width: calc(100%)} el-table :dataprops.row.family :cell-styleproductiontableStyle :headerCellStyleproductiontableStyleel-table-column typeindex width70 label排名 propname aligncenter/el-table-column propprojectNum label项目编号 alignleft/el-table-column propprojectName label项目名称 alignleft//el-table/div/template
/el-table-column
逻辑代码
const productiontableStyle(column:any) {if(column.columnIndex 0) {return {padding-left:15px}}
}
