elementui el-radio 垂直排列
elementui el-radio 垂直排列
默认排列方式为水平
通过网上说的 :direction="'vertical'" 不好使
解决方案
直接使用css修改样式
代码如下
<div class="vertical-radio">
<el-radio-group v-model="radio">
<el-radio :label="3">选项一</el-radio>
<el-radio :label="6">选项二</el-radio>
<el-radio :label="9">选项三</el-radio>
</el-radio-group>
</div>
样式代码如下
<style scoped>
.vertical-radio .el-radio {
display: block;
margin-bottom: 10px;
}
</style>
显示效果
完整代码如下
<template>
<div class="vertical-radio">
<el-radio-group v-model="radio">
<el-radio :label="3">选项一</el-radio>
<el-radio :label="6">选项二</el-radio>
<el-radio :label="9">选项三</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data() {
return {
radio: 3
};
}
};
</script>
<style scoped>
.vertical-radio .el-radio {
display: block;
margin-bottom: 10px;
}
</style>