首页vue3中如何动态给table赋值

vue3中如何动态给table赋值

时间: 2023-07-27 18:32:53 浏览: 459

在Vue3中，动态给表格赋值与Vue2类似，也是使用v-for指令根据数据源动态渲染表格内容。ElementUI的表格组件`<el-table>`也可以通过v-for指令来实现动态赋值。首先，在Vue实例中定义一个数据数组`tableData`，用于存储表格的数据源。 ```javascript import { ref } from 'vue' export default { setup() { const tableData = ref([ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' } ]) return { tableData } } } ``` 然后，在模板中使用`<el-table>`组件，并通过v-for指令遍历`tableData`数组，动态生成表格行和列。 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> ``` 其中，`:data`属性用于绑定表格的数据源，`<el-table-column>`组件的`prop`属性用于指定数据源中对应的属性名，`label`属性用于指定表头显示的文本。如果需要动态更新表格数据，只需要修改`tableData`数组中的数据即可。例如： ```javascript tableData.value.push({ name: '赵六', age: 24, gender: '女' }); ``` 这样，新的数据将会自动添加到表格中。需要注意的是，在Vue3中，由于响应式数据的实现方式有所改变，需要使用`value`属性来访问`ref`定义的响应式数据。

阅读全文