Vue定製iview的表格頭格式,通用版

先看效果圖:

     

動態設置表頭的公共js類:

export const demoConst = {
    //對象狀態(0禁用1啓用)
    objectStateDisable:0,
    objectStateEnable:1,

    //返回code(0有效)
    returnCodeValid:0,

    //傳參標題(add新增/update修改)
    titleAdd:"add",
    titleUpdate:"update",

    //校驗規則狀態(0禁用1啓用)
    ruleStateDisable:"0",
    ruleStateEnable:"1",

    //校驗規則彈窗標題
    addRuleModalTitle:"新增校驗規則",
    updateRuleModalTitle:"編輯校驗規則",

    //查重規則彈窗標題
    addRepeatModalTitle:"新增查重規則",
    updateRepeatModalTitle:"編輯查重規則",

    //校驗規則類型(1查重規則，2校驗規則)
    roleTypeValidate:"2",
    roleTypeRepeat:"1",

    //按鈕彈窗標題
    addBtnModalTitle:"新增按鈕",
    updateBtnModalTitle:"編輯按鈕",

    //元數據常量定義-模板類型
    templeteTypeDetail:'0',//詳情
    templeteTypeTable:'1',//列表
    templeteTypeSearch:'2',//檢索
    //元數據常量定義-字段類型
    fieldTypeText: '0',//單行文本類型
    fieldTypeTextarea: '1',//多行文本框類型
    fieldTypeBoolean: '2',//布爾類型
    fieldTypeSelect: '3',//單選類型
    fieldTypeCheck: '4',//複選類型
    fieldTypeInt: '5',//整數類型
    fieldTypeDouble: '6',//實數類型
    fieldTypeRate: '7',//百分比類型
    fieldTypePhone: '8',//電話類型
    fieldTypeAutonum: '9',//自動編號類型
    fieldTypeDate: '10',//日期類型 (年月日)
    fieldTypeDatetime: '11',//日期時間類型(年月日時分秒)
    fieldTypeMail: '12',//郵箱類型
    fieldTypeWebsite: '13',//網頁地址（鏈接）類型
    fieldTypeArea: '14',//省市區類型
    fieldTypePhoto: '15',//圖片類型
    fieldTypeEnclosure: '16',//附件類型
    fieldTypeObject: '17',//關聯對象
    fieldTypeObjectParam: '18',//引用字段
    //自定義字段所屬屬性
    itsPropertiesMain:'0',//0.主屬性字段;
    itsPropertiesObject:'1',// 1.自定義字段;
    itsPropertiesBasic:'2',// 2.系統基本字段;
    itsPropertiesDepend:'3',// 3.字段依賴性
    //客戶列表常量
    custom:{
        //可用狀態
        state:{
            enable:'0',
            disEnable:'1'
        },
        sex:{
            male:'男',
            female:'女',
        },
        version:'1.0',
        type:{
            insertId:'@id',
            selectType:'select',
            insertType:'insert',
            updateType:'update',
            deleteType:'delete',
            selectWhereOf:'is_delete=0',
        },
        objectName:'table_name',
        checkedViewId:0,
        checkedViewName:'請選擇',
        pageTotal: 0,
        pageNum: 1,
        pageSize: 10,
        rightTitleAdd:"創建",
        rightTitleUpdate:"修改",
        metaMessage:"customer",
        trueNum:"1",
        falseNum:"0",
        trueOption:"是",
        falseOption:"否",
        IntegerM:1,//整數類型 最小值
        IntegerMax:10000,//最大值
        step:"1",//增長值
        precision:"5",//小數點位數
        itsProperties:'0,1',//查主屬性+自定義屬性
        fieldState:'1',//默認有效自定義字段
    },
    businessType:{
        state:{
            enable:'1',//有效
            disEnable:'0'//失效
        },
    },
    //請求方式
    jobPost : 'POST',
    jobGet :'GET',
    executeSearch: function(thisObj,fieldName,data) {
        thisObj.$set(thisObj.queryParmaeters,fieldName,data);
        thisObj.$http.post(thisObj.queryUrl,thisObj.queryParmaeters).then(response => {
            if (response.data.returnCode === 0) {
                thisObj.returnData = response.data.beans;
            }
        });
    },
    setColumnsSearch:function(thisObj,columsObj){
         columsObj.forEach((item) =>{
                demoConst.setColumnSearch(thisObj,item);
            }
         );
    },
    setColumnSearch: function(thisObj,queryColumns) {
        if (!queryColumns) return;

        if (queryColumns.fieldType == demoConst.fieldTypeBoolean || 
               queryColumns.fieldType == mConst.fieldTypeSelect) {
            var options = [];
            var tmpItems = queryColumns.fieldValue.split("|");
            if (tmpItems) {
                tmpItems.forEach((item) => {
                    if(item) {
                        var tmpVals = item.split(":");
                        options.push({"label": tmpVals[1], "value": tmpVals[0]});
                    }
                });

                thisObj.$set(queryColumns, "filters", options);
                thisObj.$set(queryColumns, "filterMultiple", false);
                thisObj.$set(queryColumns, "filterRemote", function (data) { //執行遠程查詢
                    var fieldName = queryColumns.key;
                    demoConst.executeSearch(thisObj,fieldName,data);
                });
            }
        } else {
            thisObj.$set(queryColumns, "renderHeader", (h) => {
                if (queryColumns.fieldType == mConst.fieldTypeDate || queryColumns.fieldType == mConst.fieldTypeDatetime) { //日期類型
                    return h("span", {}, [h("span", queryColumns.title),
                        h("Poptip", {props: {placement: "bottom",transfer:true}}, [h("Icon", {props: {type: "md-calendar"}}, queryColumns.title),
                            h("span", {class: "api", slot: "content",},
                                [
                                    h('DatePicker',{
                                        props: {
                                            type:'daterange',
                                            format:"yyyy-MM-dd",
                                            size:"small",
                                            placement:"bottom-end"
                                        },
                                        on: {
                                            'on-change':function(data){
                                                var fieldName = queryColumns.key;
                                                data = "DATE:" + data;
                                                demoConst.executeSearch(thisObj,fieldName,data);
                                            }
                                        },
                                    })
                                ]
                            )])
                    ]);
                } else { //文本型
                    return h("span", {}, [h("span", queryColumns.title),
                        h("Poptip", {props: {placement: "bottom"}}, [h("Icon", {props: {type: "ios-search-outline"}}, queryColumns.title),
                            h("div", {class: "api", slot: "content",},
                                [h("Input",{props:{search:true,placeholder:""},on:{
                                    "on-search":function (data) {
                                        var fieldName = queryColumns.key;
                                        demoConst.executeSearch(thisObj,fieldName,data);
                                    }
                                }
                                })]
                                )])
                    ]);
                }
            });
        }
    }
}

 

調用方式:

this.column ={  key: this.customFormData.columnsList[item].fieldCname,
                      align: 'center',
                      type:'html',
                      sortable:true,
                      title:'測試',
                      tooltip:true,
                      fieldType:2,
                      fieldValue:3
};
demoConst.setColumnSearch(this,this.column);