记录一些element-ui可能会被我忽略的使用方式帮助快速开发

last update :2022年6月24日16:44:24

一、el-select 绑定对象传递

 <template>
  <el-select value-key="id"  v-model="form.item" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item">
    </el-option>
  </el-select>
</template> 


export default{
    data(){
        return{
            options:[
                { test:'1',value: 'HTML', label: 'HTML',id:1},
                { test:'哈哈',value: 'CSS', label: 'CSS' ,id:2}, 
                { test:'嘻嘻',value: 'JavaScript', label: 'JavaScript',id:3 }
            ],
            form:{
                item:{
                    //select选中任意项 则可以得到整个对象
                }
            }
        }
    },
}
    

我们只需要给el-select 绑定value-key="唯一值"

然后在options 中 :value = "item" 就可以直接绑定对象了

注意必须传入value-key 否则会出现问题

二、el-radio绑定Boolean

<el-form-item label="是否落实到位" prop="inPlace">
  <el-radio-group v-model="form.inPlace">
    <el-radio :label="true">是</el-radio>
    <el-radio :label="false">否</el-radio>
  </el-radio-group>
</el-form-item>

如上写法即可

三、如何使用el-button的样式且使用a标签的下载功能 今天在遇到一个需求 使用a标签下载本地文件，但是想用到el-button样式，奈何不想自己写样式 就想到嵌套在里面结果出现以下问题

只有点击红色部分的a标签才会执行下载功能导致很尴尬于是想到以下解决方案

<el-button
  type="warning"
  plain
  icon="el-icon-download"
  size="mini"
  @click="downAformPublic"
  v-hasPermi="['tinogiss:item:export']"
>
  下载模板
</el-button>

// 下载模板 为了使用el-button的样式 且不会导致a标签点击范围太小 使用动态添加a标签的方式进行下载 v8引擎会自动清空函数内的dom
downAformPublic() {
  let a = document.createElement('a')
  a.href = '/download/shixiangmuban.xlsx'
  a.setAttribute('download', '三重一大事项导入模板')
  a.click()
}

使用这样的方法就可以下载本地的public目录下的xlsx文件 且不会因为a标签太小导致点击不到的尴尬情况

四、使用css让el-dialog的body在缩放窗口时也可以完全展示

::v-deep.approval .el-dialog__body {
  padding: 20px 0;
  //88vh 由浏览器上操作栏区域和下区域 100 -（6+6) 计算得出 再减去el-footer的高度即可
  height: calc(88vh - 76px);
  overflow-x:hidden;
  overflow-y: auto;
}

五、# elementui通过v-if 来切换 table 出现问题的情况

# 像这样添加:key即可导致这样问题的原因是因为element在加载第二个table的时候，还没完全把第一个卸载掉，他寻找又没有一样的能复用的，找到以后就不刷新了，找不到再加载。然后有一部分就会错误。会导致部分字段显示空白部分又是好的
<template v-if="active===3">
  <el-table :data="form.epdList" key="WatchTableEpd">
    <el-table-column label="序号" type="index"  width="55px" />
    <el-table-column label="人员姓名" align="left" prop="personName"></el-table-column> 
  </el-table>
</template>

六、# el-data-picker 控制选择时间范围

<el-form-item label="报备时间" prop="recordTime" label-width="140px">
  <el-date-picker
    style="width:100%"
    clearable
    v-model="form.recordTime"
    type="date"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="请选择报备时间"
    :picker-options="picker_chooseMaximumRange"
  />
</el-form-item>
data(){
    return{
        //例如限制最大可选为当天 不能选未来日期
        picker_chooseMaximumRange:{
            disabledDate(time){
                return time.getTime()>Date.now();
            }
        }
    }
}

七、# computed计算多个值的总和

<el-form-item label="会议实到人数：" prop="actualAttendance">
  <el-input-number disabled step-strictly :step="1" style="width: 100%" v-model="meetingAttendanceCount" :min="0" :max="65535"></el-input-number>
</el-form-item>

computed: {
  // 计算会议实到人数
  meetingAttendanceCount: {
    // actualAttendance 实到
    // numberOfYesVote 通过
    // numberOfNoVote  反对
    // numberOfAbstentions 弃权
    get(v) {
      let thatMeetings = this.formMeetings
      return (Number(thatMeetings.numberOfYesVote) + Number(thatMeetings.numberOfNoVote) + Number(thatMeetings.numberOfAbstentions))
    },
    set(v) {
      this.formMeetings.actualAttendance = v
    }
  }
},
    

八、# el-table某行显示时换行

# html
<el-table :data="bindData"  :cell-class-name="cellStyle">
# methods
cellStyle(row) {
  if (row.column.label === '举报内容') {
    return 'cell-warp'
  }
}
# css 
.cell-warp{
  .cell{
    white-space: pre-wrap;
  }
} 

九、# el-table 根据某行props进行升序或降序排序

<el-table   :default-sort = "{prop:'orderNum', order: 'ascending'}" :data="formMeetings.specialOpinions">
ascending 升
descending 降