element-ui switch

<el-tooltip :content="'Switch value: ' + value" placement="top">

  <el-switch

    v-model="value"

    active-color="#13ce66"

    inactive-color="#ff4949"

    active-value="100"

    inactive-value="0">

  </el-switch>

</el-tooltip>

<script>

  export default {

    data() {

      return {

        value: '100',

      }

    }

  };

</script>

　　设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。

一般前后台关联场景使用情况下，注意inactive-value属性的参数类型。

比如后台返回int 类型，那么inactive-value的值就不能在前台加双引号，这样会引起类型错误，错误将会引起按钮不按实际情况控制。

<el-tooltip :content="'Switch value: ' + value" placement="top">

  <el-switch

    v-model="value"

    active-color="#13ce66"

    inactive-color="#ff4949"

    :active-value=activevalue

    inactive-value=iactivevalue>

  </el-switch>

</el-tooltip>

<script>

  export default {

    data() {

      return {

        value: '100',
        activevalue:100,
        iactivevalue:0
     } 
    }};

 </script>

　　假设后台返回值是string类型，如果没进行任何转换，那么给

activevalue赋值时将会失败，按钮不会被启动

巴特西

element-ui switch

最新文章

热门文章