antd vue table 设置rowClassName不生效的问题

antd vue table 设置rowClassName不生效的问题,第1张

在开发的需求中,需要通过设置rowClassName来设置不同的行样式,例如:

我发现,在样式中设置类adjust之后不会起作用

这样写并不会改变行的背景颜色

经过翻阅资料,别人也遇到过这样的问题,是因为adjust不能写在scoped当中,而应写在全局样式中

改成这样后样式生效,但要注意,这样可能会影响到其他组件中class为adjust的样式

DIV部分

<chart

  ref="taskChart"

  :theme="chartstheme"

  autoresize :options="chartsoptionsu"

  @click="zydwclick"

  :style="{width:chartswidth,height:chartsheight}">

</chart>

<iframe width="100%" ref="mapIframe" class="rectCorner" id="zykhMapIframe" scrolling="no"

        :src="YZKH_URL" :height="ifram_height"

        frameborder="0">

</iframe>

data部分

charts:{

//div的高度

ifram_height:0,

//echarts的高度宽度

width:'100%',

height:"230px",}

//自动设置chart的高度

methods: {

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  const chartHeight = (Number(deviceHeight) 082) /2//两个row

//计算echarts 的高度

  mechartsheight = chartHeight +'px';

//计算div部分的高度

  meifram_height = (Number(deviceHeight) 078) +'px'

},

在mountd里面调用

mounted() {

let me =this;

meRowResize();

//监视窗口发生变化再调用一次

windowonresize =function () {

meRowResize();

}

获取DOM的高度宽度公式

DOM可视高度/DOM最长的高度=计算比例

计算  table高度 

<Table border

      @on-sort-change="onSortChange"

      :columns="tableAtableColumns"

      :data="tableAtableData"

      :height="height"

      ref="currentRowTable"

      :percent="percent"

      style="white-space: nowrap;word-break: keep-all"

></Table>

data() {

return {

height:100,

//自动设置列表的高度

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  if (me$refscurrentRowTable) {

meheight = Number(deviceHeight) 065

  }

},

let me =this

meRowResize();

//监听窗口大小变化

windowonresize =function () {

meRowResize();

}

以上就是关于antd vue table 设置rowClassName不生效的问题全部的内容,包括:antd vue table 设置rowClassName不生效的问题、vue-echarts /div动态的计算高度、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9311305.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-27
下一篇2023-04-27

发表评论

登录后才能评论

评论列表(0条)

    保存