修改列表页面
修改筛选条件
一. 实现本表的name字段模糊匹配搜索
- 修改模板:只需要修改input标签属性v-model绑定的键即可
<template scope="props" slot="sizer-where">
<div class="input-group input-group-sm" style="width:165px;">
<input class="form-control" v-model="props.where['id']" placeholder="请输入关键字" type="text">
</div>
</template>
改成:
<template scope="props" slot="sizer-where">
<el-date-picker
style="width: 110px"
:editable="false"
v-model="props.where['updated_at'][0]"
:format="'yyyy-MM-dd 00:00:00'"
size="small"
:clearable="true"
@change="props.changeDate(props.where['updated_at'],0,arguments[0])"
placeholder="修改时间开始">
</el-date-picker>
<el-date-picker
style="width: 110px"
:editable="false"
v-model="props.where['updated_at'][1]"
size="small"
:clearable="true"
:format="'yyyy-MM-dd 23:59:59'"
@change="props.changeDate(props.where['updated_at'],1,arguments[0])"
placeholder="修改时间结束">
</el-date-picker>
<select class="form-control input-sm" v-model="props.where['method']">
<option value="">请求方式</option>
<option v-for="(value,index) in maps['method']" :value="index">{{value}}</option>
</select>
<select class="form-control input-sm" v-model="props.where['is_page']">
<option value="">是否为页面</option>
<option v-for="(value,index) in maps['is_page']" :value="index">{{value}}</option>
</select>
<div class="input-group input-group-sm" style="width:165px;">
<input class="form-control" v-model="props.where['name']" placeholder="请输入关键字" type="text">
</div>
</template>
- 修改控制器:在创建出来的TestController控制器中指定sizer属性对应的筛选条件即可
protected $sizer = [
'name'=>'like',
'method'=>'&',
'is_page'=>'=',
'updated_at'=>[
'>=',
'<='
]
];
3.最后编译一下模板cmd中执行
cnpm run production
完毕
二. 实现在关联表user中的字段name模糊匹配搜索
- 修改模板:只需要修改input标签属性v-model绑定的键即可
<template scope="props" slot="sizer-where">
<div class="input-group input-group-sm" style="width:165px;">
<input class="form-control" v-model="props.where['id']" placeholder="请输入关键字" type="text">
</div>
</template>
改成:
<template scope="props" slot="sizer-where">
<div class="input-group input-group-sm" style="width:165px;">
<input class="form-control" v-model="props.where['user.name']" placeholder="请输入关键字" type="text">
</div>
</template>
- 修改控制器:在创建出来的TestController控制器中指定指定sizer属性对应的筛选条件即可
protected $sizer = [
'user.name'=>'like'
];
3.最后编译一下模板cmd中执行
cnpm run production
筛选查询关联表的字段使用"."拼接即可 完毕
修改列表展示
一. 将关联表数据字段在页面展现
在控制器中的showIndexFields属性上指定需要从数据库查询的字段
/**
* Index页面字段名称显示
* @var array
*/
public $showIndexFields=[
'id','user_id','name','icon','method','month','color','num','parent_id','created_at',
'user'=>['id','name'],
'parent'=>['id','name']
];
二. 修改需要显示的模板
我们这里只需要注释掉不需要展示的字段即可;
关联表的字段显示填写"user.name"(关联模型.字段名);
修改该列title只需将对应的name属性修改即可:"用户ID"修改成"用户名称";
目前的排序规则只能支持本表的字段排序非本表字段需要修改order为false或者指定orderField属性为本表的某个字段;
<script>
export default {
components: {},
data(){
var data = this.$store.state;
data.config = {
dataUrl: data.configUrl.listUrl, //数据获取地址
editUrl: data.configUrl.showUrl, //数据编辑页面
destroyUrl: data.configUrl.destroyUrl, //删除数据地址
exportUrl: data.configUrl.exportUrl,
fields: {
//"id": {"name": "ID", "order": true},
"user.name": {"name": "用户名称", "order": true,orderField:'user_id'},
"name": {"name": "名称", "order": true},
//"email": {"name": "电子邮箱", "order": true},
"is_page": {"name": "是否为页面", "order": true},
"status": {"name": "状态", "order": true},
"icons": {"name": "图标", "order": true},
"method": {"name": "请求方式", "order": true},
//"date_at": {"name": "日期", "order": true},
"month_at": {"name": "月份", "order": true},
//"time": {"name": "时间选择器", "order": true},
//"time_picker": {"name": "时间到秒", "order": true},
"color": {"name": "颜色选择器", "order": true},
//"switch": {"name": "开关", "order": true},
//"slider": {"name": "滑块", "order": true},
//"rate": {"name": "评分星星", "order": true},
"num": {"name": "数字", "order": true},
//"description": {"name": "描述", "order": true},
//"img": {"name": "图片", "order": true},
//"ueditor": {"name": "百度编辑器", "order": true},
"parent.name": {"name": "父级", "order": true,orderField:'parent_id'},
//"created_at": {"name": "创建时间", "order": true},
"updated_at": {"name": "修改时间", "order": true}
},
operation: true //需要操作列
};
return data;
},
mounted() {
},
methods: {
//修改数据源
updateData: function (datas) {
this.lists = datas;
}
}
}
</script>
最后编译一下模板cmd中执行
cnpm run production
默认筛选项和默认排序直接在控制器设置
/**
* 默认排序
* @var array
*/
protected $orderDefault = [
'created_at'=>'desc',
'id'=>'asc'
];
/**
* 筛选条件默认值
* @var array
*/
protected $sizerDefault=[
'is_page'=>1
];