zoukankan      html  css  js  c++  java
  • el-select 和 el-checkbox

    el-select:

    • v-model的值为当前被选中的el-option的 value 属性值
    • label 值为选择器展示的 选项值
    • 如果想要设置默认选中, 直接设置 v-model 的初始值。

    遇到的一个小问题:

    描述: 请求返回的值 select 是 0 ,但是将 select-value 的设置为 select 时,select 选项框显示的是0,而不是期望的 “选择1”

    原因: el-option 中的 value 值 0, 1 都是 string 类型的,而返回的0却是 number 类型的,因此会出现错误。

    解决方法:select-value = String(select),强制类型转换。

    <el-select v-model="select-value" placeholder="请选择影响类型" style="float: left;">
        <el-option label="选择1" value="0"></el-option>
        <el-option label="选择2" value="1"></el-option>
    </el-select>
    <script>
      export default {
        data() {
          return {
            select-value: ''  // 选取默认值在里面就可以了,比如:  select-value:"0";
          }
        }
      }
    </script>

    el-checkbox:

    el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean,选中为true

    <template>
      <!-- `checked` 为 true 或 false -->
      <el-checkbox v-model="checked">备选项</el-checkbox>
    </template>
    <script>
      export default {
        data() {
          return {
            checked: true
          };
        }
      };
    </script>

    el-checkbox-group:

    • checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。 
    • el-checkbox 的 label属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。
    • label与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
    • 默认选中: this.lines = [2, 3]
    <el-checkbox-group v-model="lines">
        <el-checkbox
           v-for="item in linesOption"
           :key="item.id"
           :label="item.id"
           name="lines"
           style="float: left;"
         >
         {{item.lineName}}
         </el-checkbox>
    </el-checkbox-group>
    
    export default {
        data () {
            return {
                options5: [{
                    value: 'HTML',
                    label: 'HTML'
                }, {
                    value: 'CSS',
                    label: 'CSS'
                }, {
                    value: 'JavaScript',
                    label: 'JavaScript'
                }],
                lines: []
            }
        }
    }
    猪猪侠要努力呀!
  • 相关阅读:
    快手视频下载脚本
    ffmpeg 加载双语字幕
    GNU Wget 1.19.1 static built on mingw32
    Struts配置应用2
    Struts配置应用1
    spring-IOC控制反转
    spring-纯pojo切面
    spring面向切面编程的方式实现
    spring-CGLib动态代理
    spring-JDK_AOP动态代理
  • 原文地址:https://www.cnblogs.com/mlllily/p/10820233.html
Copyright © 2011-2022 走看看