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  

   
   获取数据中初始化
   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：与需要校验的同步
   
   
    
   
   
   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. 切割文字多余用...表示

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

    

8.