elementui使用中遇到问题

vue项目elementUI中el-tree组件修改图标的方法

.el-tree-node__content{
  height: 35px;
  margin: 10px 0px;
  .el-tree-node__expand-icon {
    padding: 0px;
    margin-right: 20px;
    width: 30px;
    height: 30px;
    content: url("../../../commons/images/sign-check-icon.png");
  }
  .el-tree-node__expand-icon.expanded{
    transform: rotate(0deg);
  }
}

vue项目elementui中uploade

文件未上传之前，在el-input显示上传文件名称，上传成功后，删除上传文件名称；

//上传内容一旦改变就执行该函数:on-change="loginPictureCardPreview"
loginPictureCardPreview(loginlogofileList) {
     if(!loginlogofileList.response){
        //请求未成功，返回值为空
        //将上传图片文件的名称和图片显示指定位置
        this.loginImageUrl = loginlogofileList.url;
        this.loginlogoimgname = loginlogofileList.name;
      }else{
        //保存之后清除上传文件的名字
        //请求成功，返回值返回
        this.loginlogoimgname = ''
      }
},

上传的文件附带其他数据，当文件未改变时，附加数据单独上传

• elementui中的uploader组件，点击上传的文件没有更改时，上传请求时不能发送的，但是此时我们可能仍需要上传其他的附带数据，所以可以根据文件上传时在el-input框显示的文件名里区分；

/*登录页logo部分，点击保存按钮执行loginlogosubmitUpload*/
loginlogosubmitUpload() {
  //将上传的附带信息显示先清空
  this.loginsysname = '';
  //根据上传的文件名称是否在input表格中显示来做个判断
  if(this.loginlogoimgname){
    console.log('系统logo图片名称不为空');
    //将需要上传的附带信息设置好
    this.loginLogoSysName.loginLogoSysName = this.loginpreviewsysname;
    //此时走正常的上传请求
    this.$refs.loginlogoupload.submit();
  }else{
    console.log('系统名称为空');
    //走一个新的请求，依然是一样的接口，但是请求方式更改了
    this.$http('get', '/api/****/****/****', {queryParams : {loginLogoSysName:this.loginpreviewsysname}})
      .then((res) => {
        if (res.statusCode === 200) {
          this.isLoginButtonDisabled = true;
        }
      })
      .catch((e) => {
        this.isLoginButtonDisabled = true;
      });
    this.isLoginButtonDisabled = true;
  }
}

elementui中的el-form组件

elementui中的el-form的重置resetFields()不起作用

<el-form ref="passwordConfig" :model="passwordConfig" label-width="80px">
      <el-form-item label="登录密码强度要求" prop="passwordStrength">
        <el-checkbox-group v-model="passwordConfig.passwordStrength">
          <el-checkbox label="小写字母" name="type" disabled></el-checkbox>
          <el-checkbox label="大写字母" name="type"></el-checkbox>
          <el-checkbox label="数字" name="type" disabled></el-checkbox>
          <el-checkbox label="特殊字符" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <div style="text-align: right">
        <el-button type="primary" @click="submitPasswordConfigForm">保 &nbsp;&nbsp;&nbsp;存</el-button>
        <el-button @click="resetPasswordConfigForm('passwordConfig')">取&nbsp;&nbsp;&nbsp;消</el-button>
      </div>
</el-form>

//script部分
/*重置按钮*/
resetPasswordConfigForm(form){
  console.log(1,1,1)
  this.$refs[form].resetFields();
},

• 其他没错，但是就是不起效果，‘1,1,1’可以输出来，但是就是重置不能使用；
• 官网上说：resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果；
• 后来发现，是每个el-form-item属性中没有加 prop=”xxx”，添加上就可以重置了；

elementui中el-checkout组件

elementui中el-checkbox选中id值，进行前后端交互

//html部分
<el-form-item label="登录密码强度要求" prop="passwordStrength">
    <el-checkbox-group v-model="passwordConfig.passwordStrength">
       <el-checkbox
         v-for="item in passwordStrengths"
         :label="item.id"  //注意，此时label绑定的是id值，而使用{{item.name}}进行显示值
         name="type"
         :disabled="item.disableddata">{{item.name}}
       </el-checkbox>
    </el-checkbox-group>
</el-form-item>

//script部分
data：
    passwordConfig:{
        passwordStrength: [1,3],  //密码强度    
    },  //默认选中 
    passwordStrengths:[  //全部选项列表
       {
         id: 1,
         name: '小写字母',
         disableddata: true
       },
       {
         id: 2,
         name: '大写字母',
         disableddata: false
       },
       {
         id: 3,
         name: '数字',
         disableddata: true
       },
       {
         id: 4,
         name: '特殊字符',
         disableddata: false
       },
     ]

elementui中el-table

• el-table中根据返回数据的不同，显示不同文字颜色：

//html部分
<el-table
  border
  stripe
  :data="equmanaTabeldata"
  ref="multipleTable"
  tooltip-effect="dark"
  @selection-change="handleSelectionChange"
  style="width: 100%">
    <el-table-column prop="cpuUtilization" label="CPU利用率" width="180">
      <template slot-scope="scope">
        <span
          style="margin-left: 10px"
          v-bind:class="{successfont: (scope.row.cpuUtilizationflag === 0),alarmfont: (scope.row.cpuUtilizationflag === 1), errorfont: (scope.row.cpuUtilizationflag === 2)}">
          {{scope.row.cpuUtilization }}
        </span>
      </template>
    </el-table-column>
<el-table>

//data部分
equmanaTabeldata: [{
    id:'4444',  //当前设备的id
    cpuUtilization:'6',    //CPU利用率
    cpuUtilizationflag: 2, //CPU利用率状态标识，0是成功，1是警告，2是失败
    //memUtilization:'7',  //内存利用率
    //memUtilizationflag: 0,  //内存利用率状态标识
    //diskUtilizationflag: 1,   //磁盘利用率状态标识
    //diskUtilization:'8',  //磁盘利用率
  }],

//css部分
.successfont{
  color: red;
}
.errorfont {
  color: springgreen;
}
.alarmfont{
  color: yellow;
}