elementui使用经验记录

组件按需加载

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，在项目根目录新增 .babelrc文件(如果根目录下有babel.config.js文件，把plugins里不同的配置复制过来并删除它，因为这两个文件的配置无法合并，只需要保留一个文件)

{
    "presets": [
        [ 
        	"@babel/preset-env",
        	//"@vue/cli-plugin-babel/preset", //或者用这个
         	{ "modules": false }
        ]
    ],
    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

最后，按需引用组件

import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);

表单验证数字的大小值

<el-form :model="form" :rules="rules">
	<el-form-item  label="半径" prop="radius">
	    <el-input type="number" v-model.number="form.radius"></el-input>
	</el-form-item>
</el-form>

<script>
data() {
	return {
		form: {
			radius: 0
		},
		rules: {
			radius: [
		        {
		            required: true,
		            message: '圆形直径必须大于0',
		            trigger: 'change'
		        },
		        {
		            type: 'number',
		            min: 1,
		            max: 10000,
		            message: '半径有效值为1~10000',
		            trigger: 'change'
		        }
		    ]
		}
	}
}
</script>

验证非必填项，值为数字

rules: {
	age: [{
	  type: 'number',
	  trigger: 'blur',
	  required: false,
	  message: '年龄必须为数字值',
	  // 解决方案：在rules 中验证这个功能的时候，对填写的数值进行判断
	  transform (value) {
	    return _.toNumber(value)
	  }
	}]
}

自定义验证规则

rules: {
	postCode: [{
      validator: (rule, value, callback) => {
          if (typeof value !== 'number' || value.toString().length !== 6) {
              callback(new Error('邮编为6位纯数字'));
          } else {
              callback();
          }
      },
      trigger: 'blur'
  }]
}

验证非必填项，值为数字且值大于0

<el-form :model="form" :rules="rules">
	<el-form-item  label="半径" prop="radius">
	    <el-input type="number" v-model.number="form.radius"></el-input>
	</el-form-item>
</el-form>

<script>
data() {
	return {
		form: {
			radius: 0
		},
		rules: {
			radius: [
				{ 
					pattern:/^[1-9]{1}[0-9]*$/, 
					message: '半径有效值大于0', 
					trigger: 'blur' 
				}
			]
		}
	}
}
</script>

日期选择器限制可选时间范围为60天内

<el-date-picker
     v-model="dateTimeStart"
     type="datetime"
     placeholder="请选择开始时间"
     :picker-options="pickerOptions"
></el-date-picker>
<el-date-picker
     v-model="dateTimeEnd"
     type="datetime"
     placeholder="请选择结束时间"
     :picker-options="pickerOptions"
></el-date-picker>
<script>
data (){
   return {
       dateTimeStart:'',
       dateTimeEnd:'',
       pickerOptions: {
          disabledDate: time => {
              let maxDate = new Date().getTime(); //最大可选时间为当前时间
              let diffDate = 60 * 24 * 3600 * 1000; //相差时间60天
              let minDate = maxDate - diffDate; //最小可选时间为当前时间减去相差时间
              return (
                  time.getTime() > maxDate || time.getTime() < minDate
              );
          }
      }  
   }     
}    
</script>

给dropdown下拉菜单中item添加点击事件

<el-dropdown>
	<i class="el-icon-setting"></i>
	<el-dropdown-menu slot="dropdown">
	  <el-dropdown-item>个人资料</el-dropdown-item>
	  <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
	</el-dropdown-menu>
 </el-dropdown>

render函数渲染按钮阻止事件冒泡

render(h) {
	 return (
	 	<el-button  on-click={ e => { e.stopPropagation(); }} > 测试按钮</el-button>
	 );
}

ElementUI el-tree 属性空间实现单选

<template>
    <div class="tree">     
    <el-tree :data="data2" show-checkbox node-key="id" default-expand-all   
    @check-change="handleClick" ref="treeForm" @node-click="nodeClick">
    </el-tree>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                 data2: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1',
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }]
                }],
                checkedId:null
            }
        },
        methods: {
            handleClick(data, checked, node){
                 if(checked == true){
                     this.checkedId = data.id;
                     this.$refs.treeForm.setCheckedNodes([data]);
                 }
            },
            nodeClick(data,checked,node){
                this.checkedId = data.id
                this.$refs.treeForm.setCheckedNodes([data]);
                
            }
        }
    }
</script>

<style scoped>

</style>

同路由跳转强制刷新该路由组件

1.在菜单的路由跳转上绑定一个随机query参数，例如时间戳或者随机数

this.$router.push({
    path:"/xxx",
    query:{
        t:Date.now(),
    },
});

2.在路由容器上绑定key值

<router-view :key="$route.path + $route.query.t"></router-view>

解决路由切换，页面不更新的实用方法

https://blog.youkuaiyun.com/w390058785/article/details/82813032

表单验证根据条件设置required

1.通过在标签上设置required属性
参考链接：
https://segmentfault.com/q/1010000016698073/a-1020000016698734
https://blog.youkuaiyun.com/akatsuki233/article/details/90607829

<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="备注" prop="remark" :required="isBindUserRemark" >
    <el-input
        type="textarea"
        :rows="4"
        v-model="form.remark"
        placeholder="请输入备注"
        :required="isBindUserRemark"
    ></el-input>
</el-form-item>
</el-form>
<script>
data() {
	return {
		isBindUserRemark: true,
		form: {
			remark: ''
		},
		rules: { 
			remark: [
				{
				   validator: (rule, value, callback) => {
				       if (value === '') {
				           callback(new Error('请输入解绑用户原因'));
				       } else {
				           callback();
				       }
				   },
				   trigger: 'change'
				}
			}
		}
	}
},

watch: {
    isBindUserRemark(val) {
        this.$nextTick(() => {
            if (val) {
                this.$refs.form.validateField('remark');
            }
        });
    }
}
</script>

2.在标签上设置rules属性
参考链接
https://www.jianshu.com/p/b1f906f98cd1

<el-form-item label="是否及时任务：" prop="taskType">
  <el-switch
    v-model="taskForm.taskType"
   :disabled="ifEdit"   
   :active-value="1"     
   :inactive-value="2">
  </el-switch>
</el-form-item>

<el-form-item 
  label="任务启动时间：" 
  prop="startTime" 
  :rules="taskForm.taskType === 2?rules.startTime:[{ required: false, message: '请选择任务启动时间', trigger: 'blur' }]">
  <el-date-picker 
      v-model="taskForm.startTime" 
      type="datetime" :disabled="ifEdit || taskForm.taskType === 1" 
      placeholder="选择任务启动时间">
  </el-date-picker>
</el-form-item>