项目小结（vue、iview）

1.用户密码md5加密

import CryptoJS from "crypto-js";

let psd= CryptoJS.SHA256(this.userForm.password.trim()).toString(CryptoJS.enc.Base64)

2.上传文件

<Upload :before-upload="handleUpload"
        :show-upload-list="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :format="['xlsx','xls']"
        :max-size="10240"
        :on-exceeded-size="handleMaxSize"
        :on-format-error="handleFormatErrorWord" 
        name='upload'
        action="/api/search/file"> 
              <Button :loading="up_file">上传文件</Button>
      </Upload>

/**上传*/
    handleUpload (file) {
      let keyID = Math.random().toString().substr(2);
     this.up_file = true;//loading
     
    },
    uploadSuccess (res, file) { 
      //上传成功
    },
    uploadError(error, file) { 
      this.up_file = false;
      this.$Message.error({
          content: error,
          duration: 30,
          closable: true
      });
    },
    handleMaxSize(file){
      this.up_file = false; 
      this.$Message.error({
          content: '文件大小不能超过 10M.',
          duration: 10,
          closable: true
      });
    },
    handleFormatErrorWord (file) {
      this.up_file = false;
      this.$Message.error({
          content: "文件格式不正确,请上传xls,xlsx格式文件",
          duration: 10,
          closable: true
      });
    },
    /**上传结束 */

3.时间控件取值转化

<DatePicker 
	@on-change="getYear" 
	format="yyyy" 
	type="year" 
	placeholder="年度" >
</DatePicker>
 /*type:显示类型;
 *format显示日期的格式
 *通过on-change事件获取值
 */
        getYear(e){
     	 this.year = e;
    	}

4.表格

a.单元格内容过多显示省略号，鼠标悬停显示详细信息

{
  title: "标题",
  align: "center",
  width:170,
  key: "projectName",
  render: (h, params) => {
    let proLen = params.row.projectName.length;
    /*如果内容长度大于7显示提示信息，否则正常显示
    */
    if(proLen > 7){
      return h("span",{
        //提示信息
          domProps: {
            title: params.row.projectName
          },
          on: {
            click: () => {
              this.show(params.row.id);
              this.title = '项目详情';
            }
          },
          style:{
            color:"#2b85e4",
            cursor:"pointer"
          }
      }, params.row.projectName.substring(0,7)+"...");
    }else{
      return  h('span',{
        on: {
            click: () => {
              this.show(params.row.id);
              this.title = '项目详情';
            }
          },
        style:{
          color:"#2b85e4",
          cursor:"pointer"
        }
      },params.row.projectName);
    }
  }
}

b.使用table展开功能,在展开子组件中调用父组件方法
table.vue

import expandRow from 'path';//引入子组件
export default {
  components: { expandRow },//作为组件
  data(){
  	columns:[
  		{
	     title:"项目列表",
	     type: 'expand',
	     width: 100,
	     render: (h, params) => {
	         return h(expandRow, {
	             props: {//传值
	                 row: params.row.result == "" ? [] : params.row.result
	             },
	             on:{//监听emit事件
	               showDetail:value => {
	                 this.$nextTick(() => {
	                 	//调用父组件方法（传参）
	                    this.detail(value[0],value[1]);
	                 })
	               }
	             }
	         })
	     }
	 }
  	]
  }
}

子组件 expandRow.vue

<template>
//html
{{row}}
</template>
<script>
    export default {
        props: {
            row: Array
        },
        methods:{
            detail(id,name){
               this.$emit('showDetail',[id,name]);
            }
        }
    };
</script>