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

最新推荐文章于 2025-09-10 00:45:23 发布

湛海不过深蓝

最新推荐文章于 2025-09-10 00:45:23 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vxe-table 文章标签： ubuntu linux 运维

本文链接：https://blog.csdn.net/bbt953/article/details/133156938

vxe-table 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vxe-Table组件的使用方法，包括如何通过`loadData`加载数据，`getTableData`获取数据，`insert`插入数据，以及处理选中和删除操作。特别强调了当使用数据绑定时，更新数据需通过getTableData获取最新状态。

<vxe-table 
	ref='tableRef'
>
</vxe-table>

加载数据：用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([])
})

获取数据：用了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就是当前列表的数据
	}
}

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

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

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

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

删除选中行数据：接4

$table.removeCheckboxRow()

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