Element-UI中元素的注意事项

switch

switch表示两种相互对立的状态间的切换，多用于触发「开/关」。

注意事项：
1.v-model绑定值的类型有三种：boolean / string / number
动态绑定数值时要用
:active-value=“100”
:inactive-value=“0”
不能用
active-value=“100”
inactive-value=“0”

• 例如：Boolean类型

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

如果项目要求用boolean的话，需要去掉active-value和inactive-value，因为默认数据类型为boolea。

• 例如：number类型

<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>

如果要求动态绑定的数值数据类型为number，那则需要在active-value和inactive-value前面加“：”
-例如：

:active-value="100" :inactive-value="0"

• 例如string类型

<template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="'100'" :inactive-value="'0'"
                     @change="handleStatusChange(scope.row)"/>
        </template>

在number数据类型加上单引号’ ’ 此时绑定的数据类型就变成string类型’100’ 和 ’ 0 ’
参考链接：https://blog.csdn.net/yxf15732625262/article/details/94618384

form表单

form表单里的label和placeholder国际化，引用翻译参数时遇到的问题

<el-form-item label="$t('m.base.community.CommunityName')" prop="communityname">
        <el-input v-model="queryParams.communityname" placeholder="$t('m.base.community.placeholder1')" clearable size="small" style="width: 200px"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>

这样引用的话标签不接受这样的表达方式，页面不会显示该字段，需要在label和placeholder前面加上“：”

 <el-form-item :label="$t('m.base.community.CommunityName')" prop="communityname">
        <el-input v-model="queryParams.communityname" :placeholder="$t('m.base.community.placeholder1')" clearable size="small" style="width: 200px"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>