先看效果图:
动态设置表头的公共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);
