当前位置: 首页>移动开发>正文

element-Ui 问题记录(个人笔记)

在我们使用element进行开发的时候,有时会出现一些奇怪的问题,这些问题有可能是框架本身的缺陷,也有可能是我们使用不当,遂将在开发过程中遇到的问题和值得记录下来的东西,做一个集合,方便以后参考。

el-time-picker组件无法选中时间

 <el-time-picker is-range 
    <!--必须设置宽度,不然会导致刷新或初始化的时候撑不开这个组件-->
    :disabled="isDisabled"
    v-model="form.time" 
    range-separator="至" start-placeholder="开始时间"
    end-placeholder="结束时间" 
    placeholder="选择时间范围"
    value-format="HH:mm" format="HH:mm">
</el-time-picker>

解决方法:必须设置默认的时间,不然无法进行时间的选择,组件里显示的为空数据

data(){
    return {
        form:{
            time: [new Date(2020, 1, 1, 9, 0), new Date(2020, 12, 31, 18, 0)],
        }
    }
}

el-time-picker组件位置定位错乱(出现在左上角)

element-Ui 问题记录(个人笔记),第1张

解决方法:给每一个时间选择器添加一个key属性即可。

封装dialog弹框组件

在子组件直接点击关闭时会导致报错(单向数据流问题)。解决方法就是在父组件操作关闭事件,并用第三个变量来控制显示与隐藏。并在visible后加.sync。

<template>
<div class="dialog">
    <el-dialog 
      :title="title" 
      :visible.sync="visible" 
      @close="$emit('update:show', false)" 
      :show="show">
      <slot></slot>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            visible: this.show
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        }
    },
    watch: {
        show() {
            this.visible = this.show; // 用另外一个变量给visible赋值
        }
    }
}
</script>

<style>

</style>
<dialog-pop title="导出学习报告设置" :show.sync="dialogTableVisible">
</dialog-pop>
// 在父组件操作dialogTableVisible

el-form表单校验不消失问题

ElementUI Form表单验证不通过,明明有值, 验证的错误信息不消失。

解决方法:表单域的item项的prop与组件的绑定值v-model的值要一样,比如 prop="a" 那么v-model的值也要等于"a"

<el-form-item label="详情" prop="detail">
   <el-input v-model="form.detail"></el-input>
</el-form-item>

el-date-picker多个选择器时选择时间错乱

 <el-time-picker v-if="ech1==1" key="startHour1" is-range v-model="time_value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" value-format="timestamp">
</el-time-picker>
<el-date-picker v-if=" ech1==2" key="startDate1" v-model="date_value1" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp">
</el-date-picker>
<el-date-picker v-if="ech1==3" key="startWeek1" v-model="time1[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周">

</el-date-picker>
<el-date-picker key="endWeek1" v-if="ech1==3" v-model="time1[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周">

</el-date-picker>
<el-date-picker v-if="ech1==4" key="startMonth1" v-model="month_value1" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="timestamp">
</el-date-picker>

<el-date-picker v-if="ech1==5" key="startYear1" v-model="year_value1[0]" type="year" value-format="timestamp" placeholder="选择年">
</el-date-picker>
<el-date-picker key="endYear1" v-if="ech1==5" v-model="year_value1[1]" type="year" value-format="timestamp" placeholder="结束年">
</el-date-picker>

注意的点:

  1. 每个选择器绑定的值最好要分开,不要相互影响。如:time_value1,date_value1......
  2. 当type为week的时候,用value-format="timestamp"会报错,如果需要使用时间戳格式的话,可以自己使用Date.parse()或moment.js来进行处理。
  3. 绑定的值该是数组就写数组,该是字符串就写字符串,不要随便赋值。

el-cascader后台返回数据与本地字段不一样

用props属性来配置成和后台数据一样的字段。

<el-cascader 
    v-model="catalogueOptions" 
    :options="cateOptions" 
    :props="props" 
    value="id" 
    label="title" 
    @change="handleCatalogueChange"
></el-cascader>
data(){
    return {
        props: { value: "id", label: "title", children: "pid" },
    }
}

el-cascader无法回显数据?

1、检查是否赋值成功;
2、赋值成功后检查拿到的数据是否与下拉列表数据id相匹配(可能后端先随便写的)

el-select为多选时数据反显不显示文字

<el-select 
    v-model="form.assistant" 
    multiple 
    placeholder="请选择" 
    value-key="id" 
    @change="handleAssistantChange"
>
     <el-option 
        v-for="item in form.assistOptions" 
       :key="item.id" 
       :label="item.realname" 
       :value="item.id">
     </el-option>
</el-select>
element-Ui 问题记录(个人笔记),第2张

注意:1.v-model绑定的值格式为[12,23,34]这种格式,如果不是需要进行处理。2.检查返回id数组与下拉框列表中的数据是否有匹配,如果不匹配则显示不了文字。

[Vue warn]: <transition-group> children must be keyed: <ElTag>报错

element-Ui 问题记录(个人笔记),第3张

保证绑定的数据类型与后台数据类型一致的情况下,还出现以上报错,可能有以下原因:

  1. value-key没有设置;
  2. value-key不是唯一性
  3. value-key绑定的值不是el-option循环中每一项item对象的属性名

el-tree树形控件获取包括半选状态的节点

勾选时默认获取到的节点是不包括半选状态的,所以我们前端传过去之后往往返回的也不包括半选状态的,所以反显的时候不正确。处理方法如下:

element-Ui 问题记录(个人笔记),第4张
<el-tree ref="tree" 
   :data="treeData" 
   show-checkbox 
   node-key="id"
   :default-checked-keys="addRo.authorization" 
   :props="defaultProps">
</el-tree>
//确定添加
handleAddAuthorization(formName) {
    this.$refs[formName].validate(valid => {
       if (valid) {
           // 通过node获取选中的树节点,包括半选状态的
           let authorization = this.$refs['tree'].getCheckedNodes(false, true).map(i => i.id)
       }
    }
}

el-tree点击编辑反显时父节点下的子节点全部选中(本应只选中一部分)

解决方案:

<el-tree
    ref="tree"
    :check-strictly="checkStrictly"
    :data="routesData"
    show-checkbox
    node-key="path"
    class="permission-tree"
/>
data() {
    checkStrictly: false,
    routesData: []
}

1.设置check-strictly
checkStrictly是一个变量,默认值是false
2.拿到接口数据后:

handleGetTreeData() {
     this.$http(params).then(res => {
         this.checkStrictly = true  //重点:给数节点赋值之前 先设置为true
         this.$nextTick(() => {
             const routes = res.data
             this.$refs.tree.setCheckedNodes(routes) //给树节点赋值
             this.checkStrictly = false //重点: 赋值完成后 设置为false
         })
      }) 
}

el-table添加单选按钮

element-Ui 问题记录(个人笔记),第5张
<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
   >
    <el-table-column label="选择" width="65">
     <template scope="scope">
      <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)"></el-radio>
    </template>
    </el-table-column>
    <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>
</template>
data() {
    return {
       radio: ''
    }
},
 methods: {
  getCurrentRow(row){ 
    //获取选中数据this.templateSelection = row;
    },
  }

去除单选按钮里的数字,只需添加空格标签&nbsp;就行了。

<el-radio 
  :label="scope.$index" 
  v-model="radio" 
  @change.native="getCurrentRow(scope.row)"
>
{{&nbsp;}}
</el-radio>

el-form的label-width设置为"auto"时报错

element-Ui 问题记录(个人笔记),第6张

解决方法:设置为具体的数值或百分比。( 注:每一个el-form-item可以设置单独的label-wodth。)

组件事件传第二个自定义参数

我们直接绑定一个事件的时候,事件默认有一个参数,但是我们想传第二个参数的时候,需要怎么传,以下就是解决方法:

<el-time-picker
    is-range
    v-model="time_value1" 
    key="hour" 
    range-separator="至" 
    start-placeholder="开始时间" 
    end-placeholder="结束时间" 
    placeholder="选择时间范围" 
    value-format="timestamp" 
    @change="((val)=>{handleTimeSelect(val,'hour')})"
>
</el-time-picker>

el-form常用的表单正则验证【用户名、密码、身份证号、邮箱号,手机号,车牌号、ip地址等】

https://blog.csdn.net/weixin_43970743/article/details/88532307

el-radio-group 接口数据赋值后点击没反应

如果 v-model 是二级字段,而js中又设置了默认选择项,则点击无反应。
解决办法:
v-model绑定的值改成一级对象。

el-input框接口数据赋值后无法编辑内容问题

请求接口数据赋值后,页面上input框正常显示,值也是对的,但是不可编辑。
解决办法:
使用vue的全局api方法,this.$set(data, property, value)

Vue解决echart在element的tab切换时显示不正确或宽度自适应问题:

原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小。所以要做的就是在页面加载时,就对图表进行初始化
解决方法:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置默认显示的tab

el-date-picker获取日,周,月第一天和最后一天

<el-date-picker v-if="inputForm.type==1" class="fl" v-model="date" type="date" placeholder="选择日期" value-format="timestamp" @change="handleDateChange">
</el-date-picker>
<el-date-picker v-if="inputForm.type==2" v-model="week" type="week" format="yyyy 第 WW 周" placeholder="选择周" value-format="yyyy-MM-dd" :picker-options="{firstDayOfWeek:1}" @change="handleWeekChange">
</el-date-picker>
<el-date-picker v-if="inputForm.type==3" v-model="month" type="month" placeholder="选择月" value-format="timestamp" @change="handleMonthChange">
</el-date-picker>
        handleDateChange(e) { // 获取本日最早一小时和最后一小时时间戳
            let start = e/1000
            let end = start + 24*60*60-1
            console.log("start", start);
            console.log("end",end);
        },
        handleWeekChange(e) { // 获取本周最早一天和最后一天时间戳
            // 周选择器获取的默认是当前轴第二天的时间
            let start = moment(e).unix()-24*60*60
            let end = moment(e).unix()+24*60*60*6-1 // 23:59:59
            console.log("start", start);
            console.log("end", end);
        },
        handleMonthChange(value) { // 获取本月最早一天和最后一天时间戳
            let date = new Date(value);
            let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 在前面补0
            let year = date.getFullYear();
            let startTime = year + '' + month + '01';
            let day = new Date(year, month, 0); // 第三个参数日为0可以获得本月最后一天
            let endTime = year + '' + month + '' + day.getDate();
            console.log(moment(startTime).unix(), 'startTime');
            console.log(moment(endTime).unix(), 'endTime ');
        }

el-input 只能输入正整数完美解决不闪动

<el-input
    :value="text"
    @input="e => (text = isnumber(e))"
   
    :disabled="isEdit"
></el-input>
    isnumber(val) {
      val = val.replace(/[^0-9]/gi, "");
      // 此处还可以限制位数以及大小
      return val;
    },

el-table序号自定义

element-Ui 问题记录(个人笔记),第7张
element-Ui 问题记录(个人笔记),第8张
<el-table
    :data="tableData"
   >
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
  </el-table>
 methods: {
      indexMethod(index) {
        return index * 2;
      }
 }

解决表格编辑弹窗改变其中一项,表格数据实时变动问题

在每次弹出对话框的时候深拷贝一次当前行数据的副本

this.form = JSON.parse(JSON.stringify(row))

el-form只校验表单其中一个字段

在一些用户注册场景中,提交整个表单前有时候我们会做一些单独字段的校验,例如发送手机验证码,发送时我们只需要校验手机号码这个字段,可以这样做:

this.$refs['form'].validateField('mobile', valid => {
  if (valid) {
    // 发送验证码
  }
})

如果需要多个参数,将参数改为数组形式即可。

el-table表头与内容错位

全局设置

.el-table--scrollable-y .el-table__body-wrapper {
     overflow-y: overlay !important;
}

......


https://www.xamrdz.com/mobile/4w91995951.html

相关文章: