layui动态表格出现 横竖间隔线

  1. table.render({ //其它参数在此省略
  2. skin: 'line' //行边框风格
  3. ,even: true //开启隔行背景
  4. ,size: 'sm' //小尺寸的表格
  5. });

在用上面的例子中 skin line 是出现行边框风格 。用skin:"row" 出现的竖着的边框风格 。但是我想实现的有横竖的间隔线,看文档也没有说明。试了下 skin:"line|row" 就出现了,横竖都有的边框线

其他相关参数说明

参数名可选值备注
skinline (行边框风格)
row (列边框风格)
nob (无边框风格)
用于设定表格风格,若使用默认风格不设置该属性即可
eventrue/false若不开启隔行背景,不设置该参数即可
sizesm (小尺寸)
lg (大尺寸)
用于设定表格尺寸,若使用默认尺寸不设置该属性即可
在 Vue 中进行表格横竖屏切换可以通过 CSS 来实现。可以定义两个不同的 CSS 类,一个用于横屏显示表格,一个用于竖屏显示表格,然后通过 JavaScript横竖屏切换时动态地添加或删除对应的 CSS 类。 下面是一个简单的示例代码: ```html <template> <div class="table-container" :class="{ 'table-horizontal': isHorizontal }"> <table> <!-- 表格内容 --> </table> </div> </template> <script> export default { data() { return { isHorizontal: false, // 是否横屏显示表格 }; }, mounted() { // 监听窗口大小改变事件 window.addEventListener('resize', this.handleResize); // 初始化时执行一次 this.handleResize(); }, methods: { // 处理窗口大小改变事件 handleResize() { this.isHorizontal = window.innerWidth > 768; // 设置阈值,大于 768px 为横屏显示 }, }, }; </script> <style> .table-container { overflow: auto; /* 添加滚动条 */ } .table-horizontal table { writing-mode: vertical-lr; /* 竖排文字 */ transform: rotate(-180deg); /* 翻转表格 */ } @media screen and (min-width: 768px) { .table-horizontal table { writing-mode: horizontal-tb; /* 横排文字 */ transform: none; /* 恢复表格 */ } } </style> ``` 在上面的代码中,我们通过 `isHorizontal` 变量来控制表格横竖显示。在 `mounted` 钩子函数中,我们监听窗口大小改变事件,并在该事件处理函数中根据窗口大小来设置 `isHorizontal` 变量的值。在模板中,我们动态地绑定了 `table-container` 的 CSS 类,如果 `isHorizontal` 为 `true`,则添加 `table-horizontal` 类,否则不添加。在 CSS 中,我们使用了 `writing-mode` 和 `transform` 属性来实现表格横竖显示。在视口宽度大于 768px 时,我们使用 `@media` 查询来恢复表格的横排文字和正常显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值