table表格,隔行,格列变色

隔行变色

每隔 奇数 行变色一次

tr:nth-child(odd) {
  background-color: #eee;
}

在这里插入图片描述

每隔 偶数 行变色一次

tr:nth-child(even) {
  background-color: #eee;
}

在这里插入图片描述

隔列变色

每隔 奇数 行变色一次

td:nth-child(odd) {
  background-color: #fff065;
}

每隔 偶数 行变色一次

td:nth-child(even) {
  background-color: #fff065;
}

隔行,一半为A颜色,一半为B颜色

tr:nth-child(odd) {
  background-color: #eee;
}

tr:nth-child(odd)>td:nth-child(n+5) {
  background-color: #fff065;
}

在这里插入图片描述
:nth-child() 选择器 中 n表示计数器,从 0 开始,a表示倍数,b表示偏移值

el-table是Element UI框架中的一个表格组件,它提供了丰富的功能和灵活的配置选项。在el-table中合并单元格列可以通过使用span-method属性来实现。 span-method属性是一个函数,用于控制表格中每个单元格的合并方式。该函数接收四个参数:row(当前行数据)、column(当前列数据)、rowIndex(当前行索引)和columnIndex(当前列索引)。函数需要返回一个对象,其中包含两个属性:rowspan(合并的行数)和colspan(合并的列数)。 下面是一个示例代码,演示如何在el-table中合并单元格列: ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, { name: '赵六', age: 18, gender: '女' } ] }; }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 2) { // 在第三列进行合并 if (rowIndex === 0 || rowIndex === 2) { // 第一行和第三行合并 return { rowspan: 2, colspan: 1 }; } else { // 其他行不合并 return { rowspan: 1, colspan: 1 }; } } } } }; </script> ``` 在上述代码中,handleSpanMethod函数用于控制第三列的合并方式。根据条件判断,第一行和第三行的第三列会合并为一个单元格,其他行的第三列不合并。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值