dv-scroll-board轮播表如何添加内部边框

夏之小星星

已于 2024-04-04 14:03:59 修改

阅读量221

点赞数 3

文章标签： vue 前端 javascript css

于 2024-03-28 09:24:40 首次发布

本文链接：https://blog.csdn.net/cabriella_/article/details/137097831

版权

利用定制元素的方式，官网给的方法如下：
在这里插入图片描述
官方网址：http://datav.jiaminghi.com/guide/scrollBoard.html
我的需求：想要在轮播表内部某一列添加边框，效果如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1e595f47e305450f8d15e2cab5fd944a.png

话不多说，直接上代码：
组件部分：

<dv-scroll-board :config="config" style="width:100%;height:100%;"  />

别忘了定义config：

 data(){
        return{
            config:{},
        }
    },

初始化部分：

 init(){
        this.config = { 
          header: ['列1', '列2',  '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">列3</div>', '列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">列5</div>', '列6'],
          data: [
          ['行1列1', '行1列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行1列3</div>', '行1列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行1列5</div>','行1列6'],
          ['行2列1', '行2列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行2列3</div>', '行2列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行2列5</div>','行2列6'],
          ['行3列1', '行3列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行3列3</div>', '行3列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行3列5</div>','行3列6'],
          ['行4列1', '行4列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行4列3</div>', '行4列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行4列5</div>','行4列6'],
          ['行5列1', '行5列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行5列3</div>', '行5列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行5列5</div>','行5列6'],
          ['行6列1', '行6列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行6列3</div>', '行6列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行6列5</div>','行6列6'],
          ['行7列1', '行7列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行7列3</div>', '行7列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行7列5</div>','行7列6'],
          ['行8列1', '行8列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行8列3</div>', '行8列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行8列5</div>','行8列6'],
          ['行9列1', '行9列2', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行9列3</div>', '行9列4', '<div style="border-width: 0 1px 0 0; border-style: solid; border-color: #80ffff;">行9列5</div>','行9列6'],                
          ],
          align: ["center", "center", "center", "center","center", "center"],
          rowNum: 8, // 表行数
          headerBGC:"#2E65D9",
          oddRowBGC:"#021E99",
          evenRowBGC:"#2B46AD",
          columnWidth: [100,120,120,120,120]
        }
        },