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);