使用这个办法帮我解决工作上的难题

我正在参加「掘金·启航计划」。

今天聊一个工作中遇到的问题，其实也是很简单的一个问题。

就是我们在封装了一个表格组件，这个表格是继承自vxeTable这个包的。我们想做成一个通过配置来指定某一行的行颜色和字体颜色。

一开始我想这个简单，直接将配置的行颜色和字体颜色赋值给vxeTable的控制行样式和字体样式的属性就好了，本身用户使用到的这个属性的设置保留，跟这个背景颜色和字体颜色做一个合并就好了。

最开始我是想用这个属性的。

后面想了一下，发现使用rowStyle必然有坑，因为rowStyle设置的样式最后是挂载到行内样式中的，样式的优先级是高于类名设置样式的优先级。

在我本身设置的行元素的背景色之外，其他一些hover悬停，点击等等样式也要保留，不能被我的这个style行内样式给覆盖了。

以悬停操作为例，悬停上去产生的样式是这样的。

所以我就想到使用优先级更低的类名控制样式的方法，所以选择了rowClassName这个属性。

但是此时配置是在js中，我们需要给定一个固定的类名，这个类名对应的背景颜色是一个变化的值，要做到这样一个需求，怎么实现呢？

那就是使用less的var属性，以实现通过js控制less中类名对应的样式。

那么，现在的问题就变成了「如何实现动态js变量改变scss的变量值」。

如何实现动态js变量改变scss的变量值

下面我举一个vue的简单例子，你看完就懂了。

template模板

<template>
  <div>
    <p v-for="item in list" :style="{'--content': item.content, '--color': item.color}"></p>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      list: [
        { content: '我们', color: 'red', background: '#000' },
        { content: '"是"', color: 'orange', background: '#f00' },
        { content: '"共产主义"', color: 'yellow', background: '#0a0' },
        { content: '"接班人"', color: 'green', background: '#00b' }
      ]
    };
  }
};
</script>

less文件

p{
  background: var(--background);
  color: var(--color);
}

看效果

最后给大家看看这样设置的效果。

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。