ElementUI表格table中使用select下拉框组件时获取改变之前的值
时间: 2024-03-20 18:44:51 浏览: 70
浅谈Vue Element中Select下拉框选取值的问题
要获取 ElementUI 表格 Table 中使用 Select 下拉框组件时改变之前的值,可以使用以下步骤:
1. 在 Table 中定义 Select 组件,并绑定 v-model 指令到一个变量,例如:
```
<el-table-column prop="status">
<template slot-scope="scope">
<el-select v-model="scope.row.status">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</template>
</el-table-column>
```
2. 监听 Select 组件的 change 事件,同时传入当前行的数据和列名作为参数:
```
<el-table-column prop="status">
<template slot-scope="scope">
<el-select @change="handleChange(scope.row, 'status')" v-model="scope.row.status">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</template>
</el-table-column>
```
3. 在 methods 中定义 handleChange 方法,该方法接收当前行的数据和列名作为参数,并将改变之前的值保存到一个变量中:
```
methods: {
handleChange(row, column) {
// 获取改变之前的值
let oldValue = row[column];
// 处理 Select 组件的 change 事件
// ...
}
}
```
通过以上步骤,就可以获取 ElementUI 表格 Table 中使用 Select 下拉框组件时改变之前的值了。
阅读全文