继续上篇：render + mixins 写法，基础篇
把page.vue中所有常用的配置，提取到mixins中
- mixins/page-base.js
export default {
data() {
return {
// 查询条件
searchParams: {
keyword: ''
},
cloneParams: {},
// 表格
table: {
loading: false,
data: []
},
// 分页
pagination: {
page: 1,
size: 20,
total: 78
}
}
},
created() {
this.cloneParams = JSON.parse(JSON.stringify(this.searchParams))
this.search()
},
methods: {
/**
* 查询
*/
search() {
this.pagination.page = 1;
this.getTableData();
},
/**
* 获取数据
*/
getTableData() {
this.table.loading = true;
this.$axios.get('/data/list.json').then(({ data }) => {
this.table.loading = false;
this.table.data = data.list;
this.pagination.total = data.totalCount;
}).catch(() => {
this.table.loading = false;
})
},
/**
* 重置
*/
reset() {
this.searchParams = JSON.parse(JSON.stringify(this.cloneParams))
},
/**
* 改变分页页数
* @param {Number} page 页数
*/
changePage(page) {
this.pagination.page = page
this.getTableData()
},
/**
* 改变每页条数
* @param {Number} size 每页条数
*/
changeSize(size) {
this.pagination.size = size
this.changePage(1)
},
/**
* 编辑
* @param {Object} row 操作的行数据
*/
editItem(row) {
console.log(row)
},
/**
* 删除
* @param {Object} row 操作的行数据
*/
deleteItem(row) {
console.log(row)
},
/**
* 渲染查询条件
*/
genPageSearch() {
return (
{this.genSearchItems()}
{this.genSearchBtns()}
)
},
/**
* 渲染 查询表单
*/
genSearchItems() {
return (
)
},
/**
* 渲染 查询按钮
*/
genSearchBtns() {
return (
this.search()}>查询
this.reset()}>重置
)
},
/**
* 渲染 主内容区域
*/
genPageContent() {
return (
{this.genTable()}
)
},
/**
* 渲染 table区域
*/
genTable() {
return (
(
this.editItem(row)}>编辑
this.deleteItem(row)}>删除
),
}} />
)
},
/**
* 渲染 底部分页
*/
genFooterPagination() {
return (
)
},
},
render() {
return (
{/* 查询条件 */}
{this.genPageSearch()}
{/* 内容区域 */}
{this.genPageContent()}
{/* 底部分页 */}
{this.genFooterPagination()}
)
}
}
- page.vue
处理查询条件、自定义内容区域、table配置，每个页面的差异
1 查询条件
- 自定义内容区域
-
table配置
页面的差异
- mixins/page-params.js
export default {
data() {
return {
// 接口配置
apis: {
search: '/api/search',
delete: '/api/delete'
},
// 查询配置
searchColumns: [{
key: 'keyword',
value: '',
label: '查询条件',
}],
// 查询条件
searchParams: {},
cloneParams: {},
// 表格
table: {
loading: false,
data: []
},
// 表格配置
tableColumns: [{
label: '姓名',
key: 'name',
props: {
width: 140
},
render: (h, { row }) => {
return {row.name}
}
}],
// 分页
pagination: {
page: 1,
size: 20,
total: 78
}
}
},
created() {
let params = {}
this.searchColumns.forEach(item => {
params[item.key] = item.value;
});
this.searchParams = params;
this.cloneParams = JSON.parse(JSON.stringify(this.searchParams))
this.search()
},
methods: {
/**
* 查询
*/
search() {
this.pagination.page = 1;
this.getTableData();
},
/**
* 获取数据
*/
getTableData() {
this.table.loading = true;
this.$axios.get(this.apis.search).then(({ data }) => {
this.table.loading = false;
this.table.data = data.list;
this.pagination.total = data.totalCount;
}).catch(() => {
this.table.loading = false;
})
},
/**
* 重置
*/
reset() {
this.searchParams = JSON.parse(JSON.stringify(this.cloneParams))
},
/**
* 改变分页页数
* @param {Number} page 页数
*/
changePage(page) {
this.pagination.page = page
this.getTableData()
},
/**
* 改变每页条数
* @param {Number} size 每页条数
*/
changeSize(size) {
this.pagination.size = size
this.changePage(1)
},
/**
* 编辑
* @param {Object} row 操作的行数据
*/
editItem(row) {
console.log(row)
},
/**
* 删除
* @param {Object} row 操作的行数据
*/
deleteItem(row) {
console.log(this.apis.delete, row)
},
/**
* 渲染查询条件
*/
genPageSearch() {
return (
{this.genSearchItems()}
{this.genSearchBtns()}
)
},
/**
* 渲染 查询表单
*/
genSearchItems() {
return this.searchColumns.map(item => (
{item.render ? item.render(this.$createElement, item) : this.genSearchItem(item)}
))
},
/**
*
* @param {Object} item 查询条件，单个配置对象
* @returns {vNode}
*/
genSearchItem(item) {
switch (item.type) {
case 'select':
return
{item.props.options.map(opt =>
default:
return
this.search()}>查询
this.reset()}>重置
)
},
/**
* 渲染 主内容区域
*/
genPageContent() {
return (
{this.genTable()}
)
},
/**
* 渲染 table区域
*/
genTable() {
return (
{
this.tableColumns.map(item => {
if (item.render) {
return item.render(this.$createElement, props)
}} />
} else {
return
)
},
/**
* 渲染 底部分页
*/
genFooterPagination() {
return (
)
},
},
render() {
return (
{/* 查询条件 */}
{this.genPageSearch()}
{/* 内容区域 */}
{this.genPageContent()}
{/* 底部分页 */}
{this.genFooterPagination()}
)
}
}
- page.vue
按页面版块拆分mixins，再按需拼装
说明：这里只是举例，可以拆分；这样拆分并不合理；拆分非常适合用于UI组件开发；
1. 拆分为 page-search.js 、 page-content.js 、footer-pagination.js
- page-search.js
export default {
data() {
return {
// 查询配置
searchColumns: [{
key: 'keyword',
value: '',
label: '查询条件',
}],
// 查询条件
searchParams: {},
cloneParams: {},
}
},
created() {
let params = {}
this.searchColumns.forEach(item => {
params[item.key] = item.value;
});
this.searchParams = params;
this.cloneParams = JSON.parse(JSON.stringify(this.searchParams))
this.search()
},
methods: {
/**
* 查询
*/
search() {
this.pagination.page = 1;
this.getTableData();
},
/**
* 获取数据
*/
getTableData() {
this.table.loading = true;
this.$axios.get('/data/list.json').then(({ data }) => {
this.table.loading = false;
this.table.data = data.list;
this.pagination.total = data.totalCount;
}).catch(() => {
this.table.loading = false;
})
},
/**
* 重置
*/
reset() {
this.searchParams = JSON.parse(JSON.stringify(this.cloneParams))
},
/**
* 渲染查询条件
*/
genPageSearch() {
return (
{this.genSearchItems()}
{this.genSearchBtns()}
)
},
/**
* 渲染 查询表单
*/
genSearchItems() {
return this.searchColumns.map(item => (
{item.render ? item.render(this.$createElement, item) : this.genSearchItem(item)}
))
},
/**
*
* @param {Object} item 查询条件，单个配置对象
* @returns {vNode}
*/
genSearchItem(item) {
switch (item.type) {
case 'select':
return
{item.props.options.map(opt =>
default:
return
this.search()}>查询
this.reset()}>重置
)
},
}
}
- page-content.js
export default {
data() {
return {
// 表格
table: {
loading: false,
data: []
},
// 表格配置
tableColumns: [{
label: '姓名',
key: 'name',
props: {
width: 140
},
render: (h, { row }) => {
return {row.name}
}
}],
}
},
methods: {
/**
* 编辑
* @param {Object} row 操作的行数据
*/
editItem(row) {
console.log(row)
},
/**
* 删除
* @param {Object} row 操作的行数据
*/
deleteItem(row) {
console.log(row)
},
/**
* 渲染 主内容区域
*/
genPageContent() {
return (
{this.genTable()}
)
},
/**
* 渲染 table区域
*/
genTable() {
return (
{
this.tableColumns.map(item => {
if (item.render) {
return item.render(this.$createElement, props)
}} />
} else {
return
)
},
}
}
- footer-pagination.js
export default {
data() {
return {
// 分页
pagination: {
page: 1,
size: 20,
total: 78
}
}
},
methods: {
/**
* 改变分页页数
* @param {Number} page 页数
*/
changePage(page) {
this.pagination.page = page
this.getTableData()
},
/**
* 改变每页条数
* @param {Number} size 每页条数
*/
changeSize(size) {
this.pagination.size = size
this.changePage(1)
},
/**
* 渲染 底部分页
*/
genFooterPagination() {
return (
)
},
}
}
2. 组装mixins
- page-mixins.js
import pageSearch from './page-search'
import pageContent from './page-content'
import footerPagination from './footer-pagination'
export default {
mixins: [
pageSearch,
pageContent,
footerPagination
],
render() {
return (
{/* 查询条件 */}
{this.genPageSearch()}
{/* 内容区域 */}
{this.genPageContent()}
{/* 底部分页 */}
{this.genFooterPagination()}
)
}
}
3. 引用mixins（嵌套引用）
源码链接：https://gitee.com/wkp_mayun/render-mixins-senior