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;

}

以下是一个 vxeTable 行内设置滚动的代码示例: ```html <template> <div> <vxe-table :data="tableData" border resizable :scroll-x="{ x: '100%' }" :scroll-y="{ y: '300px' }"> <vxe-table-column type="index" width="60"></vxe-table-column> <vxe-table-column field="name" title="姓名" width="100"></vxe-table-column> <vxe-table-column field="age" title="年龄" width="100"></vxe-table-column> <vxe-table-column field="address" title="地址" width="200"></vxe-table-column> <vxe-table-column field="phone" title="电话" width="150"></vxe-table-column> <vxe-table-column field="email" title="邮箱" width="200"></vxe-table-column> <vxe-table-column field="remark" title="备注"></vxe-table-column> </vxe-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市朝阳区', phone: '13888888888', email: 'zhangsan@qq.com', remark: '这是张三的备注' }, { name: '李四', age: 22, address: '上海市浦东新区', phone: '13999999999', email: 'lisi@qq.com', remark: '这是李四的备注' }, { name: '王五', age: 30, address: '广州市天河区', phone: '13666666666', email: 'wangwu@qq.com', remark: '这是王五的备注' }, { name: '赵六', age: 25, address: '深圳市南山区', phone: '13777777777', email: 'zhaoliu@qq.com', remark: '这是赵六的备注' }, { name: '钱七', age: 28, address: '杭州市西湖区', phone: '13555555555', email: 'qianqi@qq.com', remark: '这是钱七的备注' }, { name: '孙八', age: 20, address: '南京市鼓楼区', phone: '13111111111', email: 'sunba@qq.com', remark: '这是孙八的备注' } ] } } } </script> ``` 希望能对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

尘柢

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

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

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

打赏作者

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

抵扣说明:

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

余额充值