【vxe-table】加载渲染列表数据的写法以及一些相关的常用属性

<vxe-table 
	ref='tableRef'
>
</vxe-table>
1
2
3
4

1. 加载数据：用loadData()，然后传入你的tableData，就可以代替:data="tableData"的方式渲染列表

const tableRef = ref()
const initData = (tableData: Array<any>) => {
	const $table = tableRef.value
	if($table) $table.loadData(tableData)
}
// 调用，当tableData更新的时候，就在拿到更新后的tableData的地方，调用initData(tableData)就行
接口().then(() => {
	initData(tableData)
}).catch(() => {
	initData([])
})
1
2
3
4
5
6
7
8
9
10
11

2. 获取数据：用了loadData()加载数据，就没有表示tableData变量可供操作，vxe-table提供了getTableData()方法可使用

const tableRef = ref()
const getTableData = () => {
	const $table = tableRef.value
	if($table) {
		const { fullData } = $table.getTableData()
		// getTableData里面还有其他好些属性，可根据需要使用
		console.log(fullData)	// fullData就是当前列表的数据
	}
}
1
2
3
4
5
6
7
8
9

3. 插入数据：如果想给当前插入一行数据，可以用insert()方法

$table.insert({})	// 是插入一行空数据
$table.insert({ date: '2023-01-01' })		// 如果插入一行带数值的数据，就是这样
1
2

4. 选中数据：如果是带checkbox的列表，可以用getCheckboxRecords()方法获取当前选中了哪些行的数据的信息

const selectedRow = $table.getCheckboxRecords()
const selectedLength = $table.getCheckboxRecords()?.length
1
2

5. 删除选中行数据：接4

$table.removeCheckboxRow()
1

6. 如果是使用属性绑定的方式给vxe-table渲染数据，在进行一些操作后修改了tableData时，不要用绑定的那个变量去获取修改后的tableData，那样是拿不着最新的，一定要通过getTableData()