VUE学习(十九) vxe-table获取筛选后的数据内容
vxe-table功能强大,很好用,但是我想获取筛选后的数据内容,发现需要设置ref=“xTable”PrintListData就是最终筛选后的数据。
·
vxe-table功能强大,很好用,但是我想获取筛选后的数据内容,发现需要设置ref=“xTable”
PrintListData就是最终筛选后的数据
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)
更多推荐
已为社区贡献3条内容
所有评论(0)