element组件使用

1、el-date-picker 时间范围组件

html部分:

<el-date-picker
  v-model="qryData.time"
  :type="qryData.dateStyle=='day'?'daterange':'monthrange'"
   range-separator="~"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   :picker-options="qryData.dateStyle=='day'?dayOptions:pickerOptions"
    @change="timechange"
></el-date-picker>

// 维度是日时，只能选择今天及之前的日期，选中某个时间后，只能选择前后一个月范围的日期
data部分:
pickerMinDate:"",
qryData:{time:"",dateStyle:"day"}
dayOptions:{
    onPick: (obj) => {
      this.pickerMinDate = new Date(obj.minDate).getTime();
    },
    disabledDate:(time)=> {
       if (this.pickerMinDate) {
          const day1 =  30 * 24 * 3600 * 1000
          let maxTime = this.pickerMinDate + day1
          let minTime = this.pickerMinDate - day1
          return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()
        }else{
           return time.getTime() > Date.now()+0 * 24 * 3600 * 1000
        }
    }
}


//只能选择明天到今年的最后一天
pickerOptions: {
        disabledDate(time) {
          const lastDayOfYear = moment().endOf('year').format('YYYY-MM-DD') + " 23:59:59";
          return time.getTime() < Date.now() || time.getTime() > new Date(lastDayOfYear).getTime();
        }
      }

可选范围在今天及之后的时间：
pickerOptions: {
   disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
    }
}

// 不能选择今天及以后，且不能选择某个指定日期之前

pickerOptions: {
                disabledDate(time) {
                    const startDate = new Date()
                    const endDate = new Date()
                    startDate.setFullYear(endDate.getFullYear() - 1)
                    return (time.getTime() > Date.now() - 8.64e7) || time.getTime() < new Date("20xx-xx-xx").getTime(); 
                }
            },

2、 el-form-item 循环绑定校验

html代码：

<template>
  <el-form :model="form" ref="ruleForm" label-width="100px">
    <el-form-item label="负责人" prop="principal" :rules="rules.principal">
      <el-input v-model="form.principal"></el-input>
    </el-form-item>
    <el-form-item label="活动列表">
      <el-row v-for="(item, index) in form.activities" :key="index" style="margin-bottom: 20px;">
        <el-col :span="11">
          <el-form-item :label="`名称${index + 1}`" :prop="`activities.${index}.name`" :rules="rules.name">
            <el-input v-model="item.name" placeholder="请输入活动名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item :label="`主题${index + 1}`" :prop="`activities.${index}.content`" :rules="rules.content">
            <el-input v-model="item.content" placeholder="请输入活动主题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" style="text-align:center; font-size: 16px" >
          <i class="el-icon-circle-plus-outline" @click="addItem" v-if="index === 0"></i>
          <i class="el-icon-remove-outline" @click="removeItem(index)" v-else></i>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>


js代码：

<script>
export default {
  data () {
    return {
      form: {
        principal: '',
        activities: [{
          name: '',
          content: ''
        }]
      },
      rules: {
        principal: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入活动主题', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return console.log('未通过校验')
      })
    },
    addItem () {
      this.form.activities.push({
        name: '',
        content: ''
      })
    },
    removeItem (index) {
      this.form.activities.splice(index, 1)
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

3、el-tabs组件使用echarts时，初次加载图表不展示或展示宽度不充满。

解决：需要设置图表div的宽度。在el-tab-pane上使用v-if控制显示即可解决此问题。

4、el-select获取选中的整个对象

<el-select v-model="test" value-key="id" @change="changeValue">
  <el-option v-for="item in arr" :label="item.name" :key="item.id" :value="item"></el-option>
</el-select>

data(){
    return {
        test: "",
        arr: [
            { id: 1, name: "张三",age:"q" },
            { id: 2, name: "李四" ,age:"e"},
            { id: 3, name: "王五" ,age:"ee"}
          ]
    }
},
methods:{
    changeValue(value) {
      console.log("value", value);
    }
}

5、多个el-date-picker切换时，样式错乱

解决：在每个el-date-picker组件上添加唯一的key

// 日维度最多选择30天，月维度最后选择12个月

<el-select v-model="dateStyle" placeholder="请选择" @change="changedateStyle"> 
    <el-option label="日" value="day"> </el-option>
    <el-option label="月" value="month"> </el-option>
</el-select>
<el-date-picker v-if="dateStyle=='day'" key="day"  v-model="time" type="daterange" range-separator="~" start-placeholder="开始日期"  end-placeholder="结束日期" :picker-options="dayOptions"  @change="timechange"></el-date-picker>
 <el-date-picker v-if="dateStyle=='month'" key="month" v-model="time" type="monthrange" range-separator="~"  start-placeholder="开始日期" end-placeholder="结束日期"  :picker-options="pickerOptions" @change="timechange" ></el-date-picker>


...
data(){
    return{
        dateStyle:"day",
        time:[],
        startTime:"",
        endTime:"",
        // 日期组件
        selectDate:"",
        pickerMinDate: '',  
        // 日维度
      dayOptions:{
        onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
          if (obj.maxDate) {
            this.pickerMinDate= ''
          }
        },
        disabledDate:(time)=> {
          if (this.pickerMinDate) {
              const day1 =  30 * 24 * 3600 * 1000
              let maxTime = this.pickerMinDate + day1
              let minTime = this.pickerMinDate - day1
              return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now();
          }else{
              return time.getTime() > Date.now();
          }
        }
      },
        // 月维度
        pickerOptions:{
        // 设置不能选择的日期
            onPick: (obj) => {
                this.selectDate= new Date(obj.minDate).getTime();
                if (obj.maxDate) {
                    this.selectDate= ''
                }
            }, 
            disabledDate: (time) => {          
              if (this.selectDate) {
                let year = new Date(this.selectDate).getFullYear();//获取当前年份
                let month = new Date(this.selectDate).getMonth() + 1;//获取当前月份
			    let one = this.getBDays(year,month);
                let one1 = this.getADays(year,month);
                // one = 12*30 * 24 * 3600 * 1000;
                let maxTime = this.selectDate+ one1;
                let minTime = this.selectDate- one;
                return  time.getTime() > maxTime || time.getTime() < minTime ||  time.getTime() > Date.now();
              }else{
                return time.getTime() > Date.now();
              }
            }
      },  
    }
},
...
methods:{
    // 时间格式化
    formatTime(v){
      let date = new Date(v);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month>9?month:('0'+month);
      let day = date.getDate();
      day = day<10?('0'+day):day;
      if(this.dateStyle=='day'){
        return year+"-"+month+"-"+day;
      }else{
        return year+"-"+month;
      }
    },
    changedateStyle(){
        ....
    },
    timechange(v){
      if(v==null){
          this.startTime='';
          this.endTime='';
      }else{
          this.$set(this,"time", [v[0], v[1]]);
          this.startTime=this.formatTime(v[0]);
          this.endTime=this.formatTime(v[1]);                        
      }   
    }
}

6、el-select绑定整个对象时，怎么使用el-form的prop进行必填校验

解决：在rules中对实际绑定的字段

<el-form :rules="rules" :model="formData">
    <el-form-item prop="typeId.typeId">
        <el-select v-model="formData.typeId" value-key="typeId">
            <el-option v-for="item in Options" :label="item.name" :key="item.typeId" :value="item"></el-option>
        </el-select>
    </el-form-item>
</el-form>

...
data(){
    return{
        rules:{
            "typeId.typeId":[
                {required: true,message: "字典类型不能为空", trigger: "blur"}
            ]
        },
        formData:{
            typeId:{typeId:""}
        }
    }
}

7、使用scoped时无法修改组件样式

使用如下代码不能实现样式修改：
<style scoped>
    .custom-search-form-item .ms-form-item__content{
        width:200px;
    }
</style>


需要使用如下方式进行修改：
<style scoped>
    .custom-search-form-item >>> .ms-form-item__content{
        width:200px;
    }
</style>

8、更改表格每行数据，单独设置只改了数据，没有更新视图

示例代码：
let index= 0;
this.$set(this.dataList[index], "xxx", "yyyy")

9、el-date-picker type=daterange新增没问题，但编辑不触发change事件也不更改视图解决方法：

<el-date-picker v-model="form.date" placeholder="选择日期范围" type="daterange"
range-separator="~" value-type="same" @input="changeDate"></el-date-picker>



changeDate(v){
    this.$forceUpdate()
}

10、el-date-picker 日期范围不能选择同一天或者要求必填间隔两天

    // 不能选择同一天
    pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && !maxDate) {
            this.timeOptionRange = minDate
          }
          if (maxDate) {
            this.timeOptionRange = null
          }
        },
        disabledDate: (time) => {
          let timeOptionRange = this.timeOptionRange
          if (timeOptionRange) {
            return time.getTime() === timeOptionRange.getTime()
          }
        }
     }

    // 间隔2天
    pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && !maxDate) {
            this.timeOptionRange = minDate
          }
          if (maxDate) {
            this.timeOptionRange = null
          }
        },
        disabledDate: (time) => {
          // 获取选中时间
          let timeOptionRange = this.timeOptionRange
          let dayRange = 1 * 24 * 60 * 60 * 1000
          if (timeOptionRange) {
            return time.getTime() === timeOptionRange.getTime() || time.getTime() === timeOptionRange.getTime() + dayRange || time.getTime() === timeOptionRange.getTime() - dayRange
          }
        }
      }

11、el-radio-group点击触发两次方法的解决方法

<el-radio-group v-model="test">
      <el-radio label="a" @click.native="test1()">按钮1</el-radio>
      <el-radio label="b" @click.native="test2()">按钮2</el-radio>
      <el-radio label="c" @click.native="test3()">按钮3</el-radio>
</el-radio-group>

12、el-select change事件触发2次

key值必须是唯一的，不能使用同一个key值

解决：Date.now()+'xx' 或结合下标index进行命名key

13、el-table封装组件后，设置行样式

表格组件：
<el-table :row-style="rowStyle"></el-table>
props:{
    rstyle:{
      type:Function,
      default:function(){return []}      
    },  
}
methods:{
    rowStyle({ row, rowIndex }) {
       return this.rstyle(row,rowIndex)
    },
}

使用：
<a-table :rstyle="rstyle"></a-table>
methods:{
    rstyle(row, index) {
      if (row.xxx) {
        return {
          color: "xxx"
        }
      }
    }
}