elementui 点击提交按钮出来el-table可以选择里面的数据 选中之后添加到例外的地方怎么实现
时间: 2024-02-29 14:52:16 浏览: 140
实现这个功能,你可以在el-table中给每个选项添加一个checkbox,然后在点击提交按钮时,遍历el-table中的数据,查找被选中的数据,将其添加到例外的地方。
具体实现步骤如下:
1. 在el-table中添加一个selection-type的列,设置type为selection。
2. 在el-table外部添加一个button,点击这个button时触发一个方法,用来遍历el-table中的数据。
3. 在这个方法中,使用`this.$refs.table.selection`来获取被选中的数据,然后将其添加到例外的地方即可。
下面是一个大概的示例代码:
```html
<template>
<div>
<el-table
ref="table"
:data="tableData"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="Age"
width="180">
</el-table-column>
</el-table>
<el-button @click="submit">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
selectedData: [], // 存储选中的数据
};
},
methods: {
submit() {
this.selectedData = this.$refs.table.selection; // 获取被选中的数据
// 将选中的数据添加到例外的地方
// ...
},
},
};
</script>
```
你需要根据自己的实际需求来调整代码,并将其与你的项目整合起来。
阅读全文