element-plus vue弹框单选
时间: 2023-11-04 22:07:03 浏览: 167
vue+elementui实现点击table中的单元格触发事件--弹框
5星 · 资源好评率100%
您可以使用 element-plus 中的 el-radio 组件来实现弹框单选功能。具体步骤如下:
1. 在弹框中使用 el-radio-group 组件包裹多个 el-radio 组件,设置 v-model 绑定选中的值。
2. 在 el-radio 组件中设置 label 属性,用于区分不同选项。
3. 点击确定按钮时,获取选中的值进行处理。
示例代码如下:
```
<template>
<el-dialog :visible.sync="dialogVisible">
<el-radio-group v-model="selected">
<el-radio :label="1">选项1</el-radio>
<el-radio :label="2">选项2</el-radio>
<el-radio :label="3">选项3</el-radio>
</el-radio-group>
<div slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
selected: ''
}
},
methods: {
handleConfirm() {
// 处理选中的值
console.log(this.selected)
this.dialogVisible = false
}
}
}
</script>
```
阅读全文