css变量在页面中的使用，实现页面变量赋值给css中

//  '--hoverColor'这个是css中var声明的变量，页面直接给其赋值就可以
 <el-table
        :data="tableList"
        row-key="id"
        border
        default-expand-all
        :row-style="{
          backgroundColor: themeData[theme].table.body.backgroundColor
        }"
        :cell-style="{
          borderColor: themeData[theme].table.body.borderColor,
          color: themeData[theme].table.body.color,
          '--hoverColor': themeData[theme].table.body.hoverColor 
        }"
        :header-cell-style="{
          backgroundColor: themeData[theme].table.header.backgroundColor,
          color: themeData[theme].table.header.color,
          borderColor: themeData[theme].table.header.borderColor,
          fontSize: themeData[theme].table.header.fontSize
        }"
      >
      
      </el-table>

// 鼠标经过时背景色  这里用变量hoverColor
.el-table__body tr:hover > td {
  background-color: var(--hoverColor) !important;
}

// 主题色
const theme = ref<string>('dark')
const themeData = ref()
themeData.value = {
  dark: {
    tree: {},
    input: {
      borderColor: '#130c0e'
    },
    table: {
      header: {
        padding: 0,
        height: `50 + 'px'`,
        borderColor: 'rgb(67, 74, 90)',
        // backgroundColor: '#130c0f',
        backgroundColor: '#1d1d1f',
        color: '#f5f5f7',
        fontSize: `17px`,
        fontFamily: '微软雅黑'
      },
      body: {
        padding: 0,
        height: `40 + 'px'`,
        // backgroundColor: '#130c0e',
        backgroundColor: '#1d1d1f',
        borderColor: 'rgb(67, 74, 90)',
        color: 'rgb(178, 221, 255)',
        fontSize: `14px`,
        fontFamily: '微软雅黑',
        hoverColor: 'rgba(0, 154, 205, 0.5)' // 鼠标经过颜色
      }
    }
  },
  light: {}
}