当前位置：首页 > news >正文

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

news 来源：原创 2025/6/14 9:55:50

有关部分的完整代码：

//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>

希望对你们有用。