VUE学习(十六) vxe-table根据值改变行背景色
if (row.gender === '女') {2.定义方法,根据值改变背景色。1.设置row-style。
·
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>
更多推荐
已为社区贡献3条内容
所有评论(0)