2020-8-29 tp5.1 vue

后台框架公共类的构建

<?php
namespace app\api\controller;

class Base {

    public function __construct()
    {

    }
    /**
     * 请求成功 构建返回数据结构  返回json
     * */
    public function success($data=array()){
        $return_data['code'] = 1;
        $return_data['time'] = date('Y-m-d H:i:s');
        $return_data['msg'] = "返回成功";
        $return_data['data'] = $data;
        echo json_encode($return_data);die;
    }

    /**
     * 请求失败 构建返回数据结构  返回json
     * */
    public function error($message='失败'){
        $return_data['code'] = -1;
        $return_data['time'] = date('Y-m-d H:i:s');
        $return_data['msg'] = $message;
        echo json_encode($return_data);die;
    }

    /**
     * 验证参数是否必传
     * $param 参数数组
     *
     * */
//        $param = array(
//        array('param_name'=>"mould_id","msg"=>"mould_id参数必传")
//        );
//        $this->check_param($param);
    public function check_param($param){
        foreach ($param as $k=>$v){
            if (!array_key_exists($v['param_name'],$_POST) || $_POST[$v['param_name']]=='') {
                $this->error($v['msg']);
            }
        }
        return true;
    }

}

element表单提交

在vue项目开发过程中，点击某个按钮结果页面刷新了一遍

后来发现路径变成了 localhost:8080/?#/login

原因：

这里是 form 表单，点击了button 按钮，触发了他的默认事件，就是触发了提交这个行为。

解决方案

使用@click.prevent 阻止默认事件

<button @click.prevent="btnClick">获得验证码

echarts的使用

 let option = {
        title: {
          show: true,
          text: "helloworld",
          x: "center",
        },
        legend: {
          data: ["hello", "world"],
          bottom: "10",
          left: 50,
          itemGap: 120,
        },
        grid:{
            left:'50',
            right:'50'
        },
        xAxis: [
          {
            type: "category",
            position: "bottom",
            data: [
              "8",
              "11",
              "14",
              "17",
              "20",
              "23",
              "02(+1)",
              "05(+1)",
              "08(+1)",
            ],
            axisLabel: {
              interval: 1,
              inside: false,
            },
            boundaryGap: "",
          },
          {
            type: "category",
            position: "top",
            show: false,
            data: ["11", "17", "23", "05(+1)"],
          },
        ],

        //使用第一个x轴，数据对应第二个x轴且隐藏
        yAxis: {
          type: "value",
          name: "TS评分",
          splitNumber: 5,
        },
        series: [
          {
            data: [820, 932, 901, 934],
            xAxisIndex: 1,
            type: "line",
            color: "blue",
            name: "hello",
          },
          {
            data: [110, 100, 555, 666],
            xAxisIndex: 1,
            type: "line",
            color: "red",
            name: "world",
          },
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
              iconStyle: {
                borderColor: "blue",
                color:"#fff",
              },
        
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
      };

element table 左上表头斜杠

HTML

 <el-table :data="tableData3" style="width: 1050px">
            <el-table-column align="center" width="200"  prop="name"></el-table-column>

            <el-table-column align="center" v-for="tab_head in headlist" :key=tab_head.name :label=tab_head.name>
                <el-table-column align="center" min-width="50" v-for="tab_heads in tab_head.datalist" :prop=tab_head.name+tab_heads :key=tab_heads :label=tab_heads ></el-table-column>
            </el-table-column>
        </el-table>

CSS

 .el-table thead.is-group tr:first-of-type th:first-of-type:before {
        content: '日期';
        text-align: center;
        position: absolute;
        width: 300px;
        height: 1px;
        bottom: 30px;
        right: 0;      
        color: #333333  !important;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type:after {
        content: '配送新增';
        text-align: center;
        position: absolute;
        width: 300px;
        top: 10px;
        left: 0;
        color: #333333  !important;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type .cell {
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 1px;
        background-color: #EBEEF5;
        display: block;
        text-align: center;
        transform: rotate(45deg);
        transform-origin: top left;
        -ms-transform: rotate(45deg);
        -ms-transform-origin: top left;
        -webkit-transform: rotate(25deg);
        -webkit-transform-origin: top left;
    }