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>

Logo

前往低代码交流专区

更多推荐