vue vue-element-admin框架使用记录

1. vue文件引入路径@xxx

   1. vue.config.js  
      
      configureWebpack: {
          // provide the app's title in webpack's name field, so that
          // it can be accessed in index.html to inject the correct title.
          name: name,
          resolve: {
            alias: {
              '@': resolve('src')}} },

2. @click.native.preven

   1. @click.native.prevent="handleLogin"
      
      1.给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件，so 在封装好的组件上使用，所以要加上.native才能click
      2.prevent 是用来阻止默认的 ，相当于原生的event.preventDefault()

3. table  

   <el-table
   :span-method="objectSpanMethod"
   :data="list"
   >
   获取数据中初始化
   fetchList(this.listQuery).then(response => {
           this.list = response.data.items
           this.total = response.data.total
           this.randerTableSpan()
       },
   
   
   export default {
   	data() {
   		return {
   			tableData: [],
               idArr: [],
               idPos: 0,
               nameArr: [],
               namePos: 0,
   		}
   	},
   	methods: {
   		// 初始化数据
   		init() {
   			/*
   				接口调用的地方.then(() => {
   					this.randerTableSpan()
   				})
   			*/
   		},
   		randerTableSpan() {
   			this.nameinit()
   			this.idinit()
   		},
   		// 检查项目
   		nameinit() {
   			// 首先初始化
   			this.nameArr = []
               this.namePos = 0
               for (let i = 0; i < this.tableData.length; i++) {
                   if (i === 0) {
                       this.nameArr.push(1)
                       this.namePos = 0
                   }
                   else {
                       if (this.tableData[i].projectType === this.tableData[i - 1].projectType) {
                           this.nameArr[this.namePos] += 1
                           this.nameArr.push(0)
                       } else {
                           this.nameArr.push(1)
                           this.namePos = i
                       }
                   }
               }
   		},
   		// 项目类别
   		idinit() {
   			this.idArr = []
               this.idPos = 0
               for (let i = 0; i < this.tableData.length; i++) {
                   if (i === 0) {
                       this.idArr.push(1)
                       this.idPos = 0
                   } 
                   else {
                       // 用于判断当前项的
                       if (this.tableData[i].checkProject === this.tableData[i - 1].checkProject) {
                           this.idArr[this.idPos] += 1
                           this.idArr.push(0)
                       } else {
                           this.idArr.push(1)
                           this.idPos = i
                       }
                   }
               }
   		},
   		// 合并的地方也只有两处
   		objectSpanMethod({ rowIndex, columnIndex }) {
               if(columnIndex === 0) {
                   const row1 = this.idArr[rowIndex]
                   const col1 = row1 > 0 ? 1 : 0
                   return {
                       rowspan: row1,
                       colspan: col1
                   }
               }
               else if(columnIndex === 1) {
                   const row1 = this.nameArr[rowIndex]
                   const col1 = row1 > 0 ? 1 : 0
                   return {
                       rowspan: row1,
                       colspan: col1
                   }
               }
           },
   	}
   }

4. 表单校验：rules‘’

    el-form  :rules  el-form-item prop：与需要校验的同步
   
   <el-form ref="categoryForm" :model="categoryForm" :rules="categoryRules">
    <el-form-item label="分 类 :" :label-width="formLabelWidth" prop="categoryName">
   
   
   data() {
         return {
           rules: {
             name: [
               { required: true, message: '请输入活动名称', trigger: 'blur' },
               { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
             ],
             ]
       },

5.  resetFields与clearValidate方法

    //根据需求二选一
     /**
      * 移除校验结果并重置字段值
      * 注：清除表单项name的校验及数值
      */
     this.$refs.form.resetFields(); 
     /**
      * 移除校验结果
      * 注：只清除表单项name的校验，不清楚表单项name的数值
      */
     this.$refs.form.clearValidate('name'); 

6. watch 监测数据变化

    data() {
       return {
         group: 'mission',
         todoList: {
           todo_data: [
             { name: 'Mission1', id: 1 },
             { name: 'Mission2', id: 2 },
             { name: 'Mission3', id: 3 },
             { name: 'Mission4', id: 4 }
           ],
           working_data: [
             { name: 'Mission', id: 5 },
             { name: 'Mission', id: 6 },
             { name: 'Mission', id: 7 },
           ],
           done_data: [
             { name: 'Mission', id: 101 },
             { name: 'Mission', id: 102 },
             { name: 'Mission', id: 103 }
           ]
         }
       }
     }, watch: {
       # 监测属性
       'todoList.todo_data'(newVal) {
         console.log(222, newVal)
       },
    # 监测对象
       todoList:{
         handler(newVal){
           console.log(3333, newVal)
         },
         deep:true
       }
     },

7. 切割文字多余用...表示

   <span>{{ element.name | nameSlice }}</span>
   filters: {
       nameSlice(name) {
         const maxLength = 15
         return name.length > maxLength ? name.slice(0, maxLength) + '...' : name
       }
     }

8. el-upload

   el-upload
           class="avatar-uploader"
           action=""
           :show-file-list="false"
           :auto-upload="false"
           :http-request="uploadAvatar"    // 重写上传方式 需要 submit方式触发
           ref="upload"
           :on-change="changeBase">
           <img v-if="user.avatar" :src="user.avatar" class="avatar" alt="">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
   export default {data() {
       return {
       uploadData: '',
       }
     },
     props: {
       user: {
         type: Object,
         default: () => {
           return {
             name: '',
             email: '',
             avatar: '',
           }
         }
       },
     },
     methods: {
       submit() {
         this.uploadData = new FormData()
         this.$refs.upload.submit();
         this.uploadData.append('name', this.user.name)
         this.uploadData.append('email', this.user.email)
         this.$emit('uploadData')
         updateUserInfo(this.uploadData).then(response => {
           this.$message({
             message: 'User information has been updated successfully',
             type: 'success',
             duration: 3 * 1000
           })
         }
         )
       },
       updateBase(e) {
           // base64 形式
         let file = e.target.files[0] || e.dataTransfer.files[0]
         let reader = new FileReader()
         reader.readAsDataURL(file)
         reader.onload = () => {
           this.user.avatar = reader.result
         }
       },changeBase(file, fileList) {
         file = file.raw
         const isJPG = file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png' || file.type === 'image/jpg';
         const isLt2M = file.size / 1024 / 1024 < 2;
   
         if (!isJPG) {
           this.$message.error('上传头像图片只能是 JPG 、png、gif、jpeg格式!');
           this.$refs.upload.clearFiles();
           return
         }
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
           this.$refs.upload.clearFiles();
           return
         }
         this.user.avatar = URL.createObjectURL(file);
       },
       uploadAvatar(content) {
         this.uploadData.append('avatar_file', content.file)
       },
       // beforeAvatarUpload(file) {
       //   const isJPG = file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png' || file.type === 'image/jpg';
       //   const isLt2M = file.size / 1024 / 1024 < 2;
       //
       //   if (!isJPG) {
       //     this.$message.error('上传头像图片只能是 JPG 、png、gif、jpeg格式!');
       //   }
       //   if (!isLt2M) {
       //     this.$message.error('上传头像图片大小不能超过 2MB!');
       //   }
       //   return isJPG && isLt2M;
       // }
     }
   }
   </script>

9. el-col没有内容占位置

    <el-row>
               <el-col :span="6"> </el-col>
               <el-col :span="12"></el-col>
             </el-row>
   
   <style>
   // 设置样式 给el-col添加一个透明的border样式
   .el-col{
     border: 1px solid transparent;
   }
   </style>

10. 多层级路由

    {
        path: '/sysManage/taskConfig',
        component: () => import('@/views/sysManage/index'),
        alwaysShow: false,
        name: 'taskConfig',
        meta: {
          title: '任务配置',
          icon: 'el-icon-stopwatch',
          roles: ['admin'] // you can set roles in root nav
        },
        children: [{
          path: '/crontabSchedule',
          component: () => import('@/views/sysManage/crontabSchedule'),
          name: 'crontabSchedule',
          meta: {
            title: '定时时间',
            icon: 'el-icon-timer',
            roles: ['admin']
          }
        },{
          path: '/periodicTask',
          component: () => import('@/views/sysManage/periodicTask'),
          name: 'periodicTask',
          meta: {
            title: '定时任务',
            icon: 'el-icon-bell',
            roles: ['admin']
          }
        },]},]
    添加空白路由组件
    
    index.vue
    
    <template>
      <keep-alive><router-view></router-view></keep-alive>
    </template>
    
    <script>
    export default {
      name: "second"
    }
    </script>
    
    <style scoped>
    </style>