天天看点

DataV 轮播表单元格超长问题处理

在使用DataV轮播组件时,遇到该问题,培训名称过长,Css自动省略为...,鼠标指向不展示全名称

这是DataV在组件封装时,没有对.cell的div增加title属性及美化

可以在赋值时进行内容定制话

DataV 轮播表单元格超长问题处理
DataV 轮播表单元格超长问题处理

简单实现就是:

<dv-scroll-board :config="gbxlconfig" />

.datav-cell {

  text-overflow: ellipsis;

  overflow: hidden;

  white-space: nowrap;

}

gbxlconfig: {

        header: ["培训班名称", "参与人数", "时间", "范围"],

        headerBGC: "#E44047", //表头颜色

        oddRowBGC: "", //奇数行背景色

        evenRowBGC: "#F5D5D4",

        data: [],

        headerHeight: "30",

        columnWidth: [120],

        align: ["center", "center", "center", "center"],

        rowNum: 5,

      },

      dyjypxData: [

[

        "<div class='datav-cell' title='党史学习教育专题学习班'>党史学习教育专题学习班</div>",

        "57",

        "2021-07-06",

        "中层副职以上",

      ],

],

继续阅读