前端代码块

1. 表格中数据转换

      <el-table-column v-if="dataForm.propertyType ==='park'"
                       prop="parkZone"
                       header-align="center"
                       align="center" :formatter="parkingZoneFor"
                       label="区域">
      </el-table-column>



       parkingZoneFor :function(row,column){
         
          switch (row.parkZone) {
            case "1":
              return 'A区'
              break;
            case "2":
              return 'B区'
              break;
            case "3":
              return 'C区'
              break;
            case "4":
              return 'D区'
              break;
            case "5":
              return 'E区'
              break;
            case "6":
              return 'F区'
              break;
            case "7":
              return 'G区'
              break;
            case "8":
              return 'H区'
              break;
          }
        },

3--------------------前端ajax请求  begain-----------------------------

	this.$http({
              url: this.$http.adornUrl(`/generator/storeinfomation/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
            if (data && data.code == "0000000") {
                if(data.data==true){
                  this.submitRent();
                }else{
                  this.$message.error("缴费时间在产权期内");
                }

            }else{
              this.$message.error(data.msg);
            }
          })

--------------------前端ajax请求  end -----------------------------

4 ---------------------- 前端Form表单置空 begain ---------------------------

this.$refs['dataForm'].resetFields()

------------------------ 前端Form表单置空 end       ---------------------------

5. -----------------------radio 单选按钮选中事件 begain ---------------------

<el-radio ref="radio1" v-model="pageType" label="space" @change="radioHandler">公共空间</el-radio>

      radioHandler(){
         console.log("start radioHandler");
      },

-----------------------radio 单选按钮选中事件 begain  ---------------------

 

6. -------------------- springboot中使用日志 begain -------------------------

   （1） 在class上添加

@Log4j2

   （2） 在代码中使用：

log.info("id为空");

----------------------     springboot中使用日志 end -------------------------

 

7. ------------------- input中添加单位 begain -----------------------

<i slot="suffix" style="font-style:normal;margin-right: 10px;" class="metre" >㎡</i>

---------------------input 中添加单位 end  --------------------- --

 

8. --------------- 不带边框的input begain----------------------

<el-input v-model="dataForm1.ownerName" readonly class="border-none"></el-input>

---------------- 不带边框的input     end ----------------------

9. -------------- options 与 id 进行匹配 begain-------------------

//1.定义setParams方法    
setParams(id,options){
      for(var i=0;i<options.length;i++){
        if(id==options[i].value){
          return options[i].label
        }
      }
    },


//2.当接收到后端发过来的数据时
this.dataForm.propertyType = this.setParams(this.dataForm.propertyType,data.data.propertyOptions);

----------------options 与 id 进行匹配 end -----------------

10. -----------------权限校验 begain --------------------

      

<el-button  v-if="isAuth('park:carPark:bind')" type="warning" size="mini" @click="bindViewHandle(scope.row.id)">绑定</el-button>     

 isAuth(key) {
          return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
      },

    ----------------- 权限校验 end     ----------------------

11-------------- 日期组件  begain ---------------

前端日期组件要指定格式

      <el-form-item label="开始收费时间" label-width="150px">
        <el-date-picker
          v-model="dataForm.payTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" :value-format="valueFormat"
          @change="getStartEndTime()"
        ></el-date-picker>
      </el-form-item>




      return {
        valueFormat: "yyyy-MM-dd HH:mm:ss",
        dataForm: {
          vehicleNo: '',
          payTime:[],
          startTime:null,
          endTime:null
        },

---------------- 日期组件 end   ------------------

 

---------- 导入js中方法  begain ----------------

  

  import {isAuth} from '@/utils'

  使用：  
<el-button  v-if="isAuth('flataccout:flatComplete')" type="success" @click="flatHandle()" :disabled="dataListSelections.length <= 0">批量平账</el-button>



utils.js中isAuth实现
   /**
 * 是否有权限
 * @param {*} key
 */
export function isAuth(key) {
    return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
}

---------导入js中方法  end      ------------------

 

 

-------- 前端判断是否有权限 begain------------

/**
 * 是否有权限
 * @param {*} key
 */
export function isAuth(key) {
    return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
}

--------前端判断是否有权限  end   --------------

 

 

----------- 表尾合计  begain ---------------

      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }

          if(index === 6){
             const values = data.map(item => Number(item[column.property]));
             if (!values.every(value => isNaN(value))) {
               sums[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 if (!isNaN(value)) {
                   return prev + curr;
                 } else {
                   return prev;
                 }
               }, 0);
               sums[index] += ' 元';
             } else {
               sums[index] = 'N/A';
             }
          }

        });
        return sums;
      },

-----------表尾合计   end     -----------------

来源：oschina

链接：https://my.oschina.net/u/3631797/blog/4308252