各位 兄台,请问如何 实现图中的表格样式 (vue3+Elmentplus)
引入vxe-table插件可以完成以上操作 或者elementui中的table中的展开行示例可以借鉴
推荐用vxe-table,改动少
这只是 样式的不同把。。。 只需要改变table的12、56行的数据 可以用伪类:
方案1.nth-child(n4-3) 和nth-child(n4-2) 修改它背景色就好了。
方案2.
// 最好是tableData 返回的时候给 需要改色的那条数据 加个标识 比如 isHeader:true
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"> // 这里也可以直接使用row-style 直接写样式.,如果还是不明白去看官网文档row-style和row-class-name
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
tableRowClassName({row, rowIndex}) {
// rowIndex 你也可以直接通过判断行数 赋值 。
if (row.isHeader) return 'warning-row'; // warning-row 是一个class 类名 你去写它的样式就好 到时候匹配上的会用这个类名的。
return '';
}