vue-element简单使用

背景，因为公司对接的平台较多，不同的平台的问题也比较多，所以整理了常见的问题点形成后台工具给客服使用，这样就减少了人力消耗。但是因为公司前端忙不过来，所以有我这个后端人员来前后端一起处理。

之前都是原生php写的前端代码，而且也写过小程序，所以这里我就研究了下前端的vue的element框架来处理。

直接上代码吧

一、后台

因为vue的特殊规定需要后台传递对象，即

[{},{},{}]

{}中的数据其实就是我们php常用的数组

如下面的实际数据结构

{code:"000000",
data:
[{psnl_id: "81899211010382", psnl_state: "1", psnl_name: "线下", cert_no: "310106199407309921",…}],
message:"请求成功"
}

二、js

define(["lib/ajax"], function(ajax) {//这里是我们前端封装的调用
    var appName = "#" + $(".app-name").attr("data-path");
    new Vue({
        el: appName,
        data: function() {
            return {
                form: {
                    id_cash_number: ""
                },
                tableCashInfo: []
            };
        },

        methods: {
            getData(v) {
        var param = Object.assign({}, v);
        var _this = this;
        ajax.post("/api/complaint/get-cash-amount", param, function(res) {
            //console.log(res);
            //console.log(res.message);

            if(res.code == '000000'){
                var cashInfo = res.data;
                //console.log(fundInfo);
                _this.tableCashInfo = cashInfo;
            }else {
                _this.tableCashInfo = [];
                alert(res.message);
            }
        });
    },
    beginRepair(v){
        var param = Object.assign({}, v);
        var _this = this;
        ajax.post("/api/complaint/forehead-repair", param, function(res) {
            //console.log(res);
            //return false;

            if(res.code == '000000'){
                var cashInfo = res.data;
                _this.tableCashInfo = cashInfo;
            }else {
                alert(res.message);
            }
        });
    },
    initSearch() {
        let obj = {};
        for (const key in this.form) {
            if (this.form.hasOwnProperty(key)) {
                const ele = this.form[key];
                if (ele) {
                    obj[key] = ele;
                }
            }
        }
        return obj;
    },
    searchFn() {
        //console.log(this.form);
        let thisobj = this.initSearch();

        if(!thisobj.id_card_number){
            alert('请输入身份证号');
            return false;
        }

        this.getData(thisobj);
    },
    repair(res) {
        if(!res){
            alert('身份证号不存在');
            return false;
        }
        var mymessage = confirm("确定要修复额度吗？");
        if(mymessage == false){
            return false;
        }

        let obj = {};//将值放到对象中
        obj['id_card_number'] = res;

        this.beginRepair(obj);
    }
}
});
});

三、前端

<div class="lib-main-wrap my-main-wrap lib-row" v-cloak>
        <p style="float: right;"><span style="color: red;">提示：</span>暂时只可修复总现金贷金额、已用现金额度在￥50以内的</p>
        <div class="userlist-wrap">
            <template>
                <el-form class='mb-20' ref="form" :model="form" label-width="auto" :inline=true label-position='left'>
                    <el-form-item label="身份证号：">
                        <el-input type='number' maxlength=11 v-model="form.id_card_number" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click = searchFn>搜索</el-button>
                </el-form>
            </template>

            <template>
                <el-table :data="tableCashInfo" label="信用飞账单：" class="table-style mb-20">
                    <el-table-column prop="psnl_name" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="cert_no" label="身份证号"></el-table-column>
                    <el-table-column prop="debit_amt" label="贷款金额"></el-table-column>
                    <el-table-column prop="cash_debit_amt" label="总现金贷款金额"></el-table-column>
                    <el-table-column prop="cash_amt" label="已用现金额度"></el-table-column>
                    <el-table-column prop="cert_no" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" @click ="repair(scope.row.cert_no)">额度修复</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kk_status" label="扣款状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.kk_status  != '无重复'" style="color:red">{{scope.row.kk_status}}</span>
                            <span v-else >{{scope.row.kk_status}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                class="mt20"
                background
                layout="prev, pager, next"
                :current-page="pageinfo.currentPage"
                @current-change = sizeChangeFn
                :total="pageinfo.totalCount">
            </el-pagination>
        </div>
    </div>

公司以前不是前后端分离的，所以是在php文件上写前端代码

附上element的官方网站：

https://element.eleme.cn/#/en-US/component/installation

教程：https://cn.vuejs.org/v2/guide/