element plus表格额外点击新增按钮,新增一行空数据详情代码用vue3.2 setup语法糖
时间: 2024-05-10 20:15:48 浏览: 8
可以使用 Element Plus 表格的 `append` 方法,在点击新增按钮时向表格中添加一行空数据。
在 Vue 3.2 中使用 setup 语法糖,可以像这样实现:
```vue
<template>
<div>
<el-button @click="handleAddRow">新增</el-button>
<el-table :data="tableData" ref="table">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script lang="ts">
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
export default {
components: {
ElTable,
ElTableColumn,
ElButton,
},
setup() {
const tableData = ref([{ name: '张三', age: 20 }, { name: '李四', age: 22 }]);
const handleAddRow = () => {
const table = this.$refs.table as ElTable;
table.append({});
};
return {
tableData,
handleAddRow,
};
},
};
</script>
```
在这个示例中,我们使用了 `ref` 创建了一个响应式的 `tableData` 数据,并且通过 `setup` 返回了一个 `handleAddRow` 函数,在该函数中通过 `$refs` 获取到了表格组件的实例,并调用了 `append` 方法向表格中添加了一行空数据。