elementui使用中遇到问题

时间：2025-02-23 12:29:03

  • vue项目elementUI中el-tree组件修改图标的方法
  • vue项目elementui中uploade
    • 文件未上传之前，在el-input显示上传文件名称，上传成功后，删除上传文件名称；
    • 上传的文件附带其他数据，当文件未改变时，附加数据单独上传
  • elementui中的el-form组件
    • elementui中的el-form的重置resetFields()不起作用
  • elementui中el-checkout组件
    • elementui中el-checkbox选中id值，进行前后端交互
  • elementui中el-table
    • el-table循环动态渲染数据，格式化时间列数据

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/");
  }
  .el-tree-node__expand-icon.expanded{
    transform: rotate(0deg);
  }
}

vue项目elementui中uploade

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

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

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

  • elementui中的uploader组件，点击上传的文件没有更改时，上传请求时不能发送的，但是此时我们可能仍需要上传其他的附带数据，所以可以根据文件上传时在el-input框显示的文件名里区分；
/*登录页logo部分，点击保存按钮执行loginlogosubmitUpload*/
loginlogosubmitUpload() {
  //将上传的附带信息显示先清空
  this.loginsysname = '';
  //根据上传的文件名称是否在input表格中显示来做个判断
  if(this.loginlogoimgname){
    console.log('系统logo图片名称不为空');
    //将需要上传的附带信息设置好
    this. = this.loginpreviewsysname;
    //此时走正常的上传请求
    this.$();
  }else{
    console.log('系统名称为空');
    //走一个新的请求，依然是一样的接口，但是请求方式更改了
    this.$http('get', '/api/****/****/****', {queryParams : {loginLogoSysName:this.loginpreviewsysname}})
      .then((res) => {
        if ( === 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="">
          <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="">
       <el-checkbox
         v-for="item in passwordStrengths"
         :label=""  //注意，此时label绑定的是id值，而使用{{}}进行显示值
         name="type"
         :disabled="">{{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: ( === 0),alarmfont: ( === 1), errorfont: ( === 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;
}

el-table循环动态渲染数据，格式化时间列数据

  • thead和tbody都是数组，thead是动态渲染的；
  • 根据thead的type值，如果是DATE那么就将其进行时间格式化。
// vue部分
<el-table
ref="multipleTable"
  :data="drillDownTable"
  border
  tooltip-effect="dark"
  style="width: 3440px">
  <el-table-column
    :key=""
    v-for="item in formThead"
    :label=""
    :prop=""
    :column-key="">
    <template slot-scope="scope">
      <div class="table-text-wrap">
        <p class="table-text-p-wrap" :title=" | filterFormat([].label)" v-if="[]">
          {{ | filterFormat([].label)}}
        </p>
      </div>
    </template>
  </el-table-column>
</el-table>
  • 将过长的内容进行文本省略
// css部分
.el-table {
    max-width: none;
}
.table-text-wrap{
  overflow: hidden;
  width: 100%;
  .table-text-p-wrap{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
  • 使用filters，根据type进行数据格式化
// js部分
filters: {
  // 下钻数据格式
  filterFormat (type, value) {
    if (type == "DATE") {
      return (value)
    }else {
      return value
    }
  }
},
  • 以下是模拟的数据
// 模拟数据
"data":{
  "thead":[
    {"label":"域名","type":"STRING","key":"host"},
    {"label":"日志编码","type":"STRING","key":"id"},
    {"label":"生成时间","type":"DATE","key":"create_time"},
    {"label":"采集时间","type":"DATE","key":"collect_time"}
  ],
  "tbody":[
    {
      "host":{"label":"10.16.66.7","value":"10.16.66.7"},
      "id":{
        "label":"f9e5484763434055bad28aa744c22344","value":"9d26456546yc2881267962e274a5f7"
      },
      "create_time":{"label":1532105850229,"value":1532105850229},
      "collect_time":{"label":1532105868058,"value":1532105868058}
    },
    {
      "host":{"label":"10.16.66.7","value":"10.16.66.7"},
      "id":{
        "label":"9d2586a5832c4c2881267962e274a5f7","value":"9d2586a5832c4c2881267962e274a5f7"
      },
      "create_time":{"label":1532105850232,"value":1532105850232},
      "collect_time":{"label":1532105868060,"value":1532105868060}
    },
    {
      "host":{"label":"10.16.66.7","value":"10.16.66.7"},
      "id":{
        "label":"c716d173e8984396968d09679b5032d6","value":"c716d173e8984396968d09679b5032d6"
      },
      "create_time":{
        "label":1532105850231,"value":1532105850231
      }
    }
  ]
}
  • utilter中的时间格式化
import moment from 'moment';
// 时间戳转时间
function formatDate (item) {
  let str = ''
  if (item) {
    item = parseInt(item)
    str = moment(item).format('YYYY-MM-DD HH:mm:ss')
  }
  return str
}
 = formatDate

相关文章