VUE学习(十九) vxe-table获取筛选后的数据内容

vxe-table功能强大，很好用，但是我想获取筛选后的数据内容，发现需要设置ref=“xTable” 

PrintListData就是最终筛选后的数据

1. PrintListData = xTable.value.getTableData().visibleData

		<vxe-table ref="xTable" :align="allAlign" :data="demo1.list" height="700" show-overflow border
			:sort-config="{ multiple: true, trigger: 'cell' }" :column-config="{ resizable: true }" :row-style="rowStyle"
			@filter-change="filterChangeEvent">
			<vxe-column type="seq" width="60"></vxe-column>
			<vxe-column field="hospitalID" sortable title="住院号" type="html"></vxe-column>
			<vxe-column field="department" width="150" 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="条码" sortable type="html"></vxe-column>
			<vxe-column field="bedNo" title="床号" type="html"></vxe-column>
			<vxe-column field="patientName" title="姓名" type="html"></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-column field="amount" title="amount"></vxe-column>
			<vxe-column field="address" title="address" type="html"></vxe-column>
			<vxe-column field="age" title="Age"></vxe-column>
			<vxe-column field="amount" title="amount"></vxe-column>
			<vxe-column field="address" title="address" type="html"></vxe-column>
		</vxe-table>

<script setup lang="ts">
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[]
})

let xTable = ref(null) as any
let PrintListData = ref(null) as any

PrintListData = xTable.value.getTableData().visibleData

   

由于设置了row-style动态修改数据，不能改变背景色，需要手动执行下面的语句就可以实现数据更改后，刷新背景颜色了

xTable.value.loadData(demo1.list)