记录使用element中遇到的问题

场景1:

在使用 el-dialog 弹框时,弹框里面的内容我放在一个组件中再把组件放在弹框里面,然后打开弹框时向组件内部传值,(不知道怎么说了,自己悟吧)

 **** 当时没有写v-if  也没有写 :destroy-on-close这个属性 ****

总之,我点击关闭弹框的时候需要销毁Dialog 中的元素(v-if的意思),但是默认是隐藏(v-show的意思)于是查文档法现有个destroy-on-close属性,是关闭销毁元素,但是加上之后并没有销毁

 

 于是我又在组件的标签中加入了v-if 当弹框关闭销毁组件,这样再次打开的时候就重新创建组件了,完美达到我的效果

使用el-tree树结构

  点击时获取最后一级的所有节点使用这个方法儿(没有子节点)

 使用时ref值自己随意设

 nodes就是所所选择节点下的所有最后一级(如果选择一级节点,二级节点中有一个没有子节点,那么这个二级节点也会被放进来

let nodes = _this.$refs['tree3'].getCheckedNodes(true);

树结构筛选(搜索)功能:

接上个功能

 在标签中添加方法后,去js中定义这个方法儿(不用改,直接复制就行)

filterNode1(value, data) {
	if (!value) return true;
		// return data.Name.indexOf(value) !== -1;
		try {
			return data.Name.indexOf(value) !== -1;
		} catch (error) {
		console.log(error.message);
	}
},

 然后在搜索的方法中这样写:

this.$refs.tree3.filter(this.inputSearch);//这里传的值是搜索框里绑定的值

 做一个图片列表,点击大图预览

 图片格式写成这样,然后点击预览的时候那样写,这样一个图片列表,点击预览功能就实现了,厉害吧!

日期选择器(禁止选择日期) 

              <el-date-picker
                  v-model="addObj.BirthDate"
                  :picker-options="pickerOptions"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
//在标签中添加这个属性  picker-options

1,禁止选择今日之前的日期

//上面的属性值在data中定义
// 禁止选择今日之前的日期(只能选择未来的日期)
pickerOptions: {
    disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
   }
}

2,禁止选择今日之后的日期

//上面的属性值在data中定义
// 禁止选择今日之后的日期
      pickerOptions: {
         disabledDate(time) {
            return time.getTime() > Date.now();
         }
      }

在使用form表单时避免input框输入的是空字符串

将 v-model 改成 v-model.trim    实际效果为禁止输入空格

 

完毕!!!!!!!!!!!!!!!!!!!!!!!!!!!