elementUI学习笔记（二）

最新推荐文章于 2024-09-12 09:11:34 发布

羊羊羊-羊羊羊

最新推荐文章于 2024-09-12 09:11:34 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签：前端 html css javascript

本文链接：https://blog.csdn.net/qq_42850724/article/details/109531105

版权

这篇博客详细介绍了elementUI中的Form组件，包括radio单选框和Checkbox多选框的使用。对于radio，讲解了如何创建单选组，以及change事件、disabled、border和size属性的应用。Checkbox部分介绍了其作为状态切换的用途，以及在checkbox-group中的应用，涉及到min和max限制，还有不确定状态的indeterminate属性。同时提到了将radio和checkbox转换为button样式的方法。

摘要由CSDN通过智能技术生成

elementUI学习笔记（二）

文章目录

- - elementUI学习笔记（二）
  - - Form
    - - radio单选框
      - Checkbox 多选框

Form

radio单选框

单选框组：适用于在多个互斥的选项中选择的场景
结合el-radio-group元素和子元素el-radio可以实现单选组。在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量。
还提供了change事件来响应变化，绑定值变化时触发，它会传入一个参数value，也就是
选中的 Radio label 值

    <template>
      <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></template>
    <script>
      export default {
    
        data () {
    
          return {
    
            radio: 3
          };
        }
      }
    </script>

按钮样式：只需要把el-radio元素换成el-radio-button元素即可
还提供了相关属性，比如disabled（是否禁用）、border（是否显示边框）、size（Radio 的尺寸，仅在 border 为真时有效）等

  <template>
      <div>
        <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
        <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
      </div>
      <div style="margin-top: 20px">
        <el-radio v-model="radio2" label="1" border si