nx-admin element ui 常用方法

1.select选择器呈现树状结构，并且同时获取value值和label值

<el-cascader
    v-model="typeCode"
    ref="cascaderKnowledge"
    :options="knowledgeTypeOptions"
    :props="knowledgeTypeProps"                
        @change="knowledgeTypeHandleChange">
</el-cascader>    

export default{
    data(){
        return{
             typeCode:[],
             knowledgeTypeOptions:[
　　　　　　　　  {typeName:'张三',typeCode:'zs',
               　　typeList:[
                      {typeName:'张三1',typeCode:'zs1'}
                  ]
               },
　　　　　　　　　{typeName:'李四'，typeCode:'ls',
                  typeList:[
                    {typeName:'李四1',typeCode:'ls1'}
                  ]
               },

　　　　　　　　],
             knowledgeTypeProps:{
             　　children:'typeList',
             　　label:'typeName',
              　　value:'typeCode'
             }
        }
    },
    methods:{
        //知识分类change
        knowledgeTypeHandleChange(value) {
            //知识分类本节点编码
            console.log(value)
            //知识分类数组中文名称
            var currentLabels = this.$refs['cascaderKnowledge'].currentLabels  
        }
    }       
}    
赋值时，直接将后台返回的数据字符串数据转成数组贴回去就好了。

2.select选择器多选，并且同时获取value值和label值

<el-select v-model="roleCodes" @change="RoleTypeHandleChange" multiple placeholder="请选择">
     <el-option
     v-for="item in RoleTypeOptions"
    :key="item.roleCode"
    :label="item.roleName"
    :value="item.roleCode">
     </el-option>
</el-select>
export default {
      data(){
         return{
            //角色编码
        roleCodes:[],
           //角色分类
       RoleTypeOptions:[
              {roleName:'张三',roleCode:'a1'},
              {roleName:'李四',roleCode:'b1'}
           ]
        }
    }
    methods:{
         //角色分类
    RoleTypeHandleChange(value){
        consoel.log(value)//value
        let obj = [];
        this.RoleTypeOptions.find((item)=>{//这里的RoleTypeOptions就是上面遍历的数据源
            value.find((items)=>{
                if(item.roleCode==items){
                          obj.push(item.roleName)
                    }
            })
        });
        console.log(obj);//label
    },
    }
}    

 3.上传多个文件的使用

<div class="upload">
        <el-upload
              class="upload-demo"
              ref="upload"
              multiple
              action="#"
              :file-list="listQuery.fileList"
              :before-remove="beforeRemove"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
             <div slot="tip" class="el-upload__tip">注：附件上传在选取文件完成时必须上传到服务器，发布时才能够保存成功！</div>
        </el-upload>
    </div>
<script>
        import axios from 'axios'//未进行封装拦截的请求才行
        export default{
            name:'knowledgeAdd',
            data(){
                return{
                    isUpload:false,
                    listQuery:{
                        fileList:[],//提交上传的附件列表
                    },
                    fileList:[],//本地选取文件列表
                }
            },
            methods:{
                //删除文件之前的提示
                beforeRemove(file,fileList){
                    if (file && file.status==="success") {
                      return this.$confirm(`确定移除 ${ file.name }？`)
                    }
                },
                //删除文件时的提示
                handleRemove(file, fileList){
                    if(file && file.status==="success"){
                        //删除时的钩子，删除当前已经上传到服务器的文件
                        this.listQuery.fileList = fileList
                    }
                },
                beforeUpload(file){
                    //设置提交开关。
                    this.isUpload = true  
                    this.fileList.push(file)//添加储存本地上传文件列表
                    return false //执行一次请求上传多个文件
                },
                submitUpload(){
                    this.$refs.upload.submit();//放在头部，主要是目的为可以先执行beforeUpload方法。
                    if(this.isUpload){ // 如果有选择文件则请求接口
                        let formData = new FormData()
                        this.fileList.map((el, index) => {
                              formData.append(`file${index}`, el)
                        })
                        var token =  this.$store.getters.userData.token//后台需要的token，视情况而定
                        var https = this.$store.getters.https//请求接口
                        formData.append('token',token) //相当于传给后台的data
                        axios.post(https+'/knowledge/know/uploadFile',formData).then((res)=>{
                            this.fileList = [] //清空本地储存的文件列表
                            const fileListArray = res.data.fileList//保存后台返回的附件列表
                            for(let i=0,len=fileListArray.length;i<len;i++){
                                this.listQuery.fileList.push(fileListArray[i])
                            }
                            //将后台返回的附件列表遍历赋值name属性主要是因为页面渲染列表时需要name属性文件名
                            this.listQuery.fileList.map((el, index) => {
                                  el.name = el.fileName
                            })
                            this.isUpload =false//关闭提交附件接口
                            this.$message({
                                  message: '上传成功!',
                                  type: 'success'
                            });
                        })
                    }else{
                        this.$message({
                              message: '请选择上传文件!',
                              type: 'warning'
                        });
                    }
                },
            }
        }
    </script>

 4.日期选择器—设置时间段方法

<div>
    开始时间:<el-date-picker align='right' :picker-options="startDatePicker" v-model="advancedListQuery.beginTime" format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>
    结束时间:<el-date-picker align='right' :picker-options="endDatePicker" v-model="advancedListQuery.endTime" format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker> 
</div>
<script>
  const DAY = 3600 * 1000 * 24 * 30;//30天
  data() {
     const self = this
     return {
        advancedListQuery:{
             beginTime:'',
             endTime:''
         },
         //开始日期选择
         startDatePicker: {
           　　disabledDate(time) {
              //定义获取结束时间
              var endTime = new Date(self.advancedListQuery.endTime).getTime()
              //如果存在结束时间
              if (self.advancedListQuery.endTime) {
                  //输出日期表：(结束日期-30天)的时间~到~(结束日期)的时间区间。
                  //比如结束日期为7月1日，则日期表可选择的区间为：6月1日~6月30日
                  return endTime - DAY > time.getTime() || endTime < time.getTime()
               } else {
                   //否则直接输出日期表为：(当前日期时间-30天)
                   //比如当前日期为7月1日，则日期表最多可选择到6月30日那天
                   return time.getTime() > (Date.now() - DAY)
               }
          }
     },
     //结束日期选择
     endDatePicker: {
         disabledDate(time) {
             //定义获取开始时间
             var beginTime = new Date(self.advancedListQuery.beginTime).getTime()
             //如果存在开始时间
             if (self.advancedListQuery.beginTime) {
                    //输出日期表：(开始日期)~到~(开始日期+30天)的时间区间
                    //比如开始日期为6月1日，则日期表可选择的区间为6月2日~7月1日
                    return beginTime > time.getTime() || beginTime + DAY < time.getTime()
              } else {
                    //否则直接输出日期表为：1970~当前日期。
                    return time.getTime() > (Date.now())
              }
          }
      　},
     }
  }
</script>

 

转载于:https://www.cnblogs.com/MJ-MY/p/11078130.html