VUE学习(十六) vxe-table根据值改变行背景色

最新推荐文章于 2025-05-20 16:11:49 发布

easyboot

最新推荐文章于 2025-05-20 16:11:49 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # VUE3 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/easyboot/article/details/128559532

VUE3 专栏收录该内容

54 篇文章

订阅专栏

该代码示例展示了在Vue项目中如何使用vxe-table组件根据数据动态设置行样式。通过`row-style`属性结合自定义方法，当行数据的性别为女或行索引在特定数组内时，将行背景色设为红色并更改文字颜色。此外，还包含了表格的基本结构和数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.设置row-style

<vxe-table :align="allAlign" :data="demo1.list" show-overflow height="700" :row-style="rowStyle">

2.定义方法，根据值改变背景色

const rowStyle: VxeTablePropTypes.RowStyle = ({ row, rowIndex }) => {

console.log(row)

console.log(row.gender)

let aa = JSON.parse(JSON.stringify(row))

console.log(aa)

//let rows = toRef(row)

if (row.gender === '女') {

return {

backgroundColor: 'red',

color: '#ffffff'

}

}

if ([2, 3, 5].includes(rowIndex)) {

return {

backgroundColor: 'red',

color: '#ffffff'

}

}

}

我的vue页面代码

<template>
	<div class="container">

		<el-row>
			<el-col :span="4">
				<el-date-picker v-model="selectdate" type="date" placeholder="Pick a day" value-format="YYYYMMDD" />
			</el-col>
			<el-col :span="2">
				<el-button type="primary" @click="getPatient">查询</el-button>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" @click="LabelPrint">标签打印</el-button>
			</el-col>
			<el-col :span="8">

				<vxe-toolbar>
					<template #buttons>
						<vxe-input v-model="demo1.filterName" type="search" placeholder="试试全表搜索"
							@keyup="searchEvent1"></vxe-input>
					</template>
				</vxe-toolbar>
			</el-col>
		</el-row>

		<vxe-table :align="allAlign" :data="demo1.list" show-overflow height="700" :row-style="rowStyle">
			<vxe-column type="seq" width="60"></vxe-column>
			<vxe-column field="hospitalID" sortable title="住院号" type="html"></vxe-column>
			<vxe-column field="department" sortable title="病区" type="html"></vxe-column>
			<vxe-column field="gender" title="性别" sortable
				:filters="[{ value: '女', label: '女' }, { value: '男', label: '男' }]"></vxe-column>
			<vxe-column field="age" title="Age"></vxe-column>
			<vxe-column field="barcode" title="条码"></vxe-column>
			<vxe-column field="bedNo" title="床号" type="html"></vxe-column>
			<vxe-column field="patientName" title="姓名"></vxe-column>
			<vxe-column field="printNo" title="printNo"></vxe-column>
			<vxe-column field="address" title="address" type="html"></vxe-column>
			<vxe-column field="age" title="Age"></vxe-column>
		</vxe-table>

	</div>
</template>

<script setup lang="ts">
import { ref, reactive, defineComponent, toRef } from 'vue'
import XEUtils from 'xe-utils';
import axios from 'axios'
import { ElRow, ElCol, ElDatePicker, ElButton } from 'element-plus';
import { VxeTablePropTypes, VxeToolbar, VxeInput, VxeTable, VxeColumn } from 'vxe-table';


const selectdate = ref('2022-09-13')
const allAlign = ref(null)
let PrintIndex = ref(0)
const demo1 = reactive({
	filterName: '',
	list: [] as any[],
	tableData: [
		{ id: 10001, no: '', hospitalID: '', name: 'Test1', role: 'Develop', sex: '0', age: 28, amount: 888, address: 'test abc' },
		{ id: 10002, no: '', hospitalID: '', name: 'Test2', role: 'Test', sex: '1', age: 22, amount: 666, address: 'Guangzhou' }
		// { id: 10003, name: 'Test3', role: 'PM', sex: '1', age: 32, amount: 89, address: 'Shanghai' },
		// { id: 10004, name: 'Test4', role: 'Designer', sex: '0', age: 23, amount: 1000, address: 'test abc' },
		// { id: 10005, name: 'Test5', role: 'Develop', sex: '0', age: 30, amount: 999, address: 'Shanghai' },
		// { id: 10006, name: 'Test6', role: 'Designer', sex: '0', age: 21, amount: 998, address: 'test abc' },
		// { id: 10007, name: 'Test7', role: 'Test', sex: '1', age: 29, amount: 2000, address: 'test abc' },
		// { id: 10008, name: 'Test8', role: 'Develop', sex: '1', age: 35, amount: 999, address: 'test abc' },
		// { id: 10009, name: 'Test9', role: 'Test', sex: '1', age: 26, amount: 2000, address: 'test abc' },
		// { id: 100010, name: 'Test10', role: 'Develop', sex: '1', age: 21, amount: 666, address: 'test abc' }
	] as any[]
})

interface Person {
	row: any
}


const rowStyle: VxeTablePropTypes.RowStyle = ({ row, rowIndex }) => {
	console.log(row)
	console.log(row.gender)

	if (row.gender === '女') {
		return {
			backgroundColor: 'red',
			color: '#ffffff'
		}
	}

	if ([2, 3, 5].includes(rowIndex)) {
		return {
			backgroundColor: 'red',
			color: '#ffffff'
		}
	}
}

const param = reactive({
	DispensingDate: selectdate.value
});



const tableData1 = ref([{
	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>

<style scoped>

.row-yellow {
	background-color: red;
}

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