- 页面不刷新更新
<wt-form-table
ref="wtFormTable" //必有
:form.sync="form"
@on-button-action="onButtonAction"
/>
js
this.$message.success(res.msg); //提示
this.$refs.wtFormTable.requestFormList(); //刷新
- 页面进来点击查询 不然数据不出来
mounted() {
this.$refs.dataForm.onClickSearch()
},
一 单选框
这种接口类型的
collId: { //单选框
type: 'select',
url: '/modules/org/List',
methods: 'post',
options: [],
props: { label: 'name', value: 'id' },
query: {
formData: {},
pageData: { currentPage: 1, pageSize: 99999 }
},
label: '学习机构名称',
rules: ['required'],
},
picture: {
type: 'upload',
genre: 'singe',
directory: 'banner',
label: '图片上传',
uploadTip: '1920x400',
listType: 'picture-card',
rules: ['required']
},
二 查询条件
<wt-search-form-item
title="标题"
v-model="form.formData.title"
type="input"
/>
<wt-search-form-item
title="状态"
v-model="form.formData.isPublish"
type="select"
constant="FILTER_IsPublish"
/>
<wt-search-form-item
title="学习机构"
v-model="form.formData.orgName"
type="select"
:props="{
label: 'name',
value: 'name',
children: 'childList',
checkStrictly: true
}"
:remoteData="{ url: '/modules/org/orgList' }"
clearable
/>
三 列表
<el-table-column prop="isPublish" label="发布状态">
<template slot-scope="scope">
{{ scope.row.isPublish | FILTER_IsPublish }}
</template>
</el-table-column>
四渲染
单选 接口搜索
collId: { // 数组类型
type: 'select',
url: '/modules/org/List',
methods: 'post',
options: [],
props: { label: 'name', value: 'id' },
query: {
formData: {},
pageData: { currentPage: 1, pageSize: 99999 }
},
label: '学习机构',
rules: ['required'],
},
多选接口搜索 `filterable: true,` 加这个能搜索 multiple: true,多选
courseIdList: { //分页类型
type: 'select',
url: 'modules/course/list',
methods: 'post',
target: 'list',
multiple: true,
options: [],
props: { label: 'title', value: 'id' },
query: {
formData: { isTrain: 1 },
pageData: { currentPage: 1, pageSize: 99999 }
},
label: '课程选择',
maxlength: 20
},
多选接口搜索(接口)
userId: {
type: 'select',
filterable: true, // 搜索必填
remote: true, // 搜索必填
options: [],
remoteSearchKey: 'realname', // 搜索必填字段名
remoteSearchUrl: 'modules/user/list', // 搜索必填接口
methods: 'post', // 搜索必填 接口类型
props: { label: 'realname', value: 'realname' },
query: { // 搜索必填参数
formData: {
collUserType: 2
},
pageData: { currentPage: 1, pageSize: 99999 }
},
label: '姓名',
rules: ['required'],
}