当前位置：首页 > news >正文

vxe-table 将表格指定行设置颜色后，选中行、悬浮行样式失效解决。

news 来源：原创 2024/5/3 21:57:21

一、表格悬浮行、选中行高亮

1.效果

在这里插入图片描述

2.代码

说明：给表格添加 :row-config="{isHover: true,isCurrent:true}" 即可

<template>
  <div>
    <vxe-table
      ref="xTable"
      height="400"
      :row-config="{isHover: true,isCurrent:true}"
      :data="tableData"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age" sortable></vxe-column>
      <vxe-column field="address" title="Address" show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop',  age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM',  age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer',  age: 23, address: 'test abc' },
        { id: 10005, name: 'Test5', role: 'Develop',  age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', role: 'Designer',  age: 21, address: 'test abc' },
        { id: 10007, name: 'Test7', role: 'Test', age: 29, address: 'test abc' },
        { id: 10008, name: 'Test8', role: 'Develop',  age: 35, address: 'test abc' }
      ],
      
    }
  }
}
</script>

二、初始化表格指定行设置背景颜色

1. 效果

在这里插入图片描述

2.代码

给表格添加配置 :row-class-name="rowClassName"
在 methods 里编写过滤行方法 rowClassName，返回值是样式类名
在样式中设置背景颜色，样式名 ::v-deep .my-table .vxe-body--row.row-yellow。其中 .my-table 是表格类名，防止样式覆盖影响其他表格。

<template>
  <div class="box">
    <vxe-table
      class="my-table"
      ref="xTable"
      height="400"
      :row-config="{isHover: true,isCurrent:true}"
      :data="tableData"
      :row-class-name="rowClassName"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age" sortable></vxe-column>
      <vxe-column field="address" title="Address" show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', age: 23, address: 'test abc' },
        { id: 10005, name: 'Test5', role: 'Develop', age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', role: 'Designer', age: 21, address: 'test abc' },
        { id: 10007, name: 'Test7', role: 'Test', age: 29, address: 'test abc' },
        { id: 10008, name: 'Test8', role: 'Develop', age: 35, address: 'test abc' }
      ],
    }
  },
  methods: {
    rowClassName({ row }) {
      if (row.age >= 30) {
        return 'row-yellow'
      }
    }
  }
}

</script>

<style scoped>
.box {
  width: 700px;
  margin: 100px;
}

::v-deep .my-table .vxe-body--row.row-yellow {
  background-color: #e1ed8952;
  z-index: 99;
}
</style>

3. 问题

在这里插入图片描述

官方给出的说明如下：

三、解决选中行、悬浮行样式失效

1. 效果

条件成立时，显示初始化样式。悬浮行显示灰色，选中行显示蓝色。

在这里插入图片描述

2.代码

通过设置 z-index 来调节，具体实现见 style 部分。

<template>
  <div class="box">
    <vxe-table
      class="my-table"
      ref="xTable"
      height="400"
      :row-config="{isHover: true,isCurrent:true}"
      :data="tableData"
      :row-class-name="rowClassName"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age" sortable></vxe-column>
      <vxe-column field="address" title="Address" show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', age: 23, address: 'test abc' },
        { id: 10005, name: 'Test5', role: 'Develop', age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', role: 'Designer', age: 21, address: 'test abc' },
        { id: 10007, name: 'Test7', role: 'Test', age: 29, address: 'test abc' },
        { id: 10008, name: 'Test8', role: 'Develop', age: 35, address: 'test abc' }
      ],
    }
  },
  methods: {
    rowClassName({ row }) {
      if (row.age >= 30) {
        return 'row-yellow'
      }
    }
  }
}

</script>

<style scoped>
.box {
  width: 700px;
  margin: 100px;
}

::v-deep .my-table .vxe-body--row.row-yellow {
  background-color: #e1ed8952;
   z-index: 99;
}

::v-deep .my-table .vxe-body--row.row--hover {
  background-color: #f5f7fa;
  z-index: 959;
}

::v-deep .my-table .vxe-body--row.row--current {
  background-color: #e6f7ff;
  z-index: 999;
}
</style>