Vxe表格样式

被要求改了下表格样式,自己用用控制台调试css调试出来的样式

//外边框线

.vxe-table--render-default .vxe-table--border-line {

  border: 1px solid blueviolet !important;

}

//列表边框线宽度和颜色

.vxe-table--render-default.border--full .vxe-body--column {

  background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);

}

//列表表头表尾线宽度和颜色

.vxe-table--render-default.border--full .vxe-header--column,

.vxe-table--render-default.border--full .vxe-footer--column {

  background-image: linear-gradient(#b9b9b9, #b9b9b9),

    linear-gradient(#b9b9b9, #b9b9b9);

}

//表头底部线

.vxe-table--header-border-line {

  border-bottom: 1px solid #b9b9b9 !important;

}

//表头底色

.vxe-header--row {

  background-color: #f3f3f3;

}

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vxe-table是一款基于Vue.js的表格组件库,支持对表格进行多种操作,例如排序、筛选、分页、编辑、导出等。而斜线表格是vxe-table中一种特殊的表格形式,它可以让表格中的某些单元格呈现斜线样式,用于展示一些特殊的数据信息。 在vxe-table中,我们可以通过设置`span-method`属性来实现斜线表格。该属性接受一个回调函数,这个函数将会在每个单元格渲染时调用,返回一个对象,包含该单元格所占用的行数和列数。通过返回不同的行数和列数,我们就可以实现斜线表格的效果。 下面是一个示例代码,用于展示如何在vxe-table中实现斜线表格: ``` <vxe-table :data="tableData"> <vxe-table-column type="index" width="60"></vxe-table-column> <vxe-table-column field="name" title="姓名" width="120"></vxe-table-column> <vxe-table-column field="age" title="年龄" width="120"></vxe-table-column> <vxe-table-column field="gender" title="性别" width="120"></vxe-table-column> <vxe-table-column field="score" title="成绩" :span-method="spanMethod"></vxe-table-column> </vxe-table> ... methods: { spanMethod({ row, rowIndex, column, columnIndex }) { if (rowIndex % 2 === 0 && columnIndex % 2 === 0) { return { rowspan: 2, colspan: 2 }; } } } ``` 以上代码中,我们设置了一个名为`spanMethod`的方法,并将其绑定到`score`列的`span-method`属性上。在`spanMethod`方法中,我们通过判断单元格所在的行和列来确定该单元格是否需要显示为斜线样式,如果需要,则返回该单元格所占用的行数和列数。通过这种方式,我们就可以实现斜线表格的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尘柢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值