vxe-table 给单元格添加自定义颜色状态，单元格加自定义样式
<p>vxe-table 给单元格添加自定义颜色状态，单元格加自定义样式</p><p>查看官网：https://vxetable.cn<br>
gitbub：https://github.com/x-extends/vxe-table<br>
gitee：https://gitee.com/x-extends/vxe-table</p>
<h2 id="第一种-class-方式">第一种， class 方式</h2>
<p>通过 headerCellClassName 、rowClassName 、cellClassName等参数自定义渲染单元格 class，返回值就是 class 字符串</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202503/3563285-20250326111723464-1202356596.png"></p>
<pre><code class="language-html"><template>
<div>
<vxe-grid class="mygrid-style" v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
border: true,
headerCellClassName ({ column }) {
if (column.field === 'name') {
return 'col-blue'
}
return null
},
rowClassName ({ rowIndex }) {
if (.includes(rowIndex)) {
return 'row-green'
}
return null
},
cellClassName ({ row, column }) {
if (column.field === 'sex') {
if (row.sex >= '1') {
return 'col-red'
} else if (row.age === 26) {
return 'col-orange'
}
}
return null
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' },
{ field: 'attr1', title: 'Attr1' },
{ field: 'address', title: 'Address', showOverflow: true }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' }
]
})
</script>
<style lang="scss" scoped>
::v-deep(.mygrid-style.vxe-grid .vxe-body--row.row-green) {
background-color: #187;
color: #fff;
}
::v-deep(.mygrid-style.vxe-grid .vxe-header--column.col-blue) {
background-color: #2db7f5;
color: #fff;
}
::v-deep(.mygrid-style.vxe-grid .vxe-body--column.col-red) {
background-color: red;
color: #fff;
}
</style>
</code></pre>
<h2 id="第二种-style-方式">第二种， style 方式</h2>
<p>通过 headerCellStyle 、rowStyle 、cellStyle 等参数自定义渲染单元格样式，返回值是个 style 对象</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202503/3563285-20250326111733688-2071722646.png"></p>
<pre><code class="language-html"><template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
border: true,
headerCellStyle ({ column }) {
if (column.field === 'name') {
return {
backgroundColor: '#f60',
color: '#ffffff'
}
}
},
rowStyle ({ rowIndex }) {
if (.includes(rowIndex)) {
return {
backgroundColor: 'red',
color: '#ffffff'
}
}
},
cellStyle ({ row, column }) {
if (column.field === 'sex') {
if (row.sex >= '1') {
return {
backgroundColor: '#187'
}
} else if (row.age === 26) {
return {
backgroundColor: '#2db7f5'
}
}
}
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' },
{ field: 'address', title: 'Address', showOverflow: true }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
]
})
</script>
</code></pre>
<p>https://gitee.com/x-extends/vxe-table</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/18793417
頁:
[1]