vue+el-ui实现el-table单元格,默认显示文字,点击时切换成下拉框,下拉框选中的值呈现在这个单元格中
时间: 2024-03-03 15:49:24 浏览: 143
vue+elementui实现点击table中的单元格触发事件--弹框
5星 · 资源好评率100%
实现这个功能可以通过以下步骤:
1. 在 el-table 中需要显示下拉框的列中,设置 type 属性为 'selection',并且设置 selectable 属性为 true,这样列的单元格就会显示为下拉框。
2. 在 el-table 中的数据源中,为需要显示下拉框的列添加一个 options 字段,用于存放下拉框选项的值。
3. 使用 slot-scope 插槽,为需要显示下拉框的列的单元格添加一个自定义模板,模板中包含一个下拉框组件 el-select 和一个显示选中值的文本框。
4. 在 el-select 的 change 事件中,将选中的值赋给数据源中对应的项的值,并且设置一个变量来标识当前单元格是否是下拉框状态。
以下是示例代码:
```html
<template>
<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="性别" type="selection" selectable>
<template slot-scope="{ row }">
<div v-if="!row.isDropdown">
{{ row.gender }}
<i class="el-icon-arrow-down" @click="toggleDropdown(row)"></i>
</div>
<div v-else>
<el-select v-model="row.gender" @change="changeGender(row)">
<el-option v-for="option in row.options" :key="option" :label="option" :value="option"></el-option>
</el-select>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: '男', options: ['男', '女'], isDropdown: false },
{ name: '李四', age: 30, gender: '女', options: ['男', '女'], isDropdown: false },
{ name: '王五', age: 40, gender: '男', options: ['男', '女'], isDropdown: false },
]
}
},
methods: {
toggleDropdown(row) {
row.isDropdown = true;
},
changeGender(row) {
row.isDropdown = false;
}
}
}
</script>
```
在这个示例中,我们使用了一个 isDropdown 属性来标识当前单元格是否是下拉框状态,初始值为 false。当用户点击单元格中的箭头图标时,会触发 toggleDropdown 方法,将 isDropdown 属性设置为 true,这样单元格会显示下拉框组件。当用户在下拉框中选中了一个值后,会触发 changeGender 方法,将选中的值赋给数据源中对应的项的 gender 属性,并且将 isDropdown 属性设置为 false,这样单元格会显示选中的值。
阅读全文