作者:管理员 历史版本:1 最后编辑:龚清 更新时间:2024-09-20 15:13
基础的配置
页面代码
ibps-crud基本的配置,功能增删改查。以及个性的插槽拓展,分页跳转更新列表数据等。
<template>
<div>
<ibps-crud
ref="crud"
:data="listData"
:pk-key="pkKey"
:toolbars="listConfig.toolbars"
:search-form="listConfig.searchForm"
:columns="listConfig.columns"
:row-handle="listConfig.rowHandle"
:pagination="pagination"
:loading="loading"
@column-link-click="handleColumnLink"
@action-event="handleAction"
@sort-change="handleSortChange"
@pagination-change="handlePaginationChange"
>
<template slot="status" slot-scope="scope">
//内部封装的自定义插槽【按需使用】
<el-tag :type="scope.row.status | optionsFilter(statusOptions)">{{ scope.row.status|statusLabelFilter(statusOptions,'label') }}</el-tag>
</template>
</ibps-crud>
// 增加&编辑
<edit
:visible="dialogFormVisible"
:edit-id="editId"
@callback="search"
@close="visible => dialogFormVisible = visible"
/>
</div>
</template>
<script>
import { queryPageList, remove } from '@/api/demo/list' //接口
import ActionUtils from '@/utils/action' //平台封装的公共方法
import { statusOptions } from './constants' //变量
import Edit from './edit' //编辑页面
export default {
components: {
Edit
},
data() {
return {
dialogFormVisible: false, // 弹窗
editId: '', // 编辑dialog需要使用
loading: true,
// 列表配置
pkKey: 'id', // 主键 如果主键不是pk需要传主键
listData: [],
listConfig: {
// 工具栏
toolbars: [
{ key: 'search' },
{ key: 'add' },
{ key: 'edit' },
{ key: 'remove' },
{ key: 'custom', icon: 'ibps-icon-cog', label: '自定义按钮' }
],
// 查询条件
searchForm: {
forms: [
{ prop: 'name', label: '名称' },
{ prop: ['start_display_time', 'end_display_time'], label: '时间', fieldType: 'daterange' },
{ prop: 'status', label: '状态',
fieldType: 'select',
options: statusOptions
}
]
},
// 表格字段配置
columns: [
{ prop: 'title', label: '标题', link: 'www.baidu.com' },
{ prop: 'author', label: '姓名' },
{ prop: 'status', label: '状态', tags: statusOptions },
{ prop: 'pageviews', label: '浏览量', sortable: 'custom' },
{ prop: 'display_time', label: '日期' }
],
// 管理列
rowHandle: {
actions: [
{ key: 'detail' },
{ key: 'edit' },
{ key: 'remove' },
{ key: 'custom', icon: 'ibps-icon-cog', label: '自定义按钮' }
]
}
},
pagination: {},
sorts: {},
statusOptions: statusOptions
}
},
created() {
this.loadData()
},
methods: {
/**
* 加载数据
*/
loadData() {
this.loading = true
queryPageList(this.getFormatParams()).then(response => {
ActionUtils.handleListData(this, response.data)
this.loading = false
}).catch(() => {
this.loading = false
})
},
/**
* 获取格式化参数
*/
getFormatParams() {
let formParams = {}
if (this.$refs['crud']) {
formParams = this.$refs['crud'].getSearcFormData() || {}
}
// 和分页数据合并
return ActionUtils.formatParams(formParams, this.pagination, this.sorts)
},
/**
* 处理分页事件
*/
handlePaginationChange(page) {
ActionUtils.setSorts(this.sorts)
ActionUtils.setPagination(this.pagination, page)
this.loadData()
},
/**
* 处理排序
*/
handleSortChange(sort) {
ActionUtils.setSorts(this.sorts, sort)
ActionUtils.setPagination(this.pagination)
this.loadData()
},
/**
* 查询
*/
search() {
ActionUtils.setPagination(this.pagination)
this.loadData()
},
/**
* 获取选中值
*
*/
getSelections() {
return this.$refs['crud'].$selections
},
/**
* 重置查询条件
*/
reset() {
this.$refs['crud'].resetSearch()
},
/**
* 处理按钮事件
*/
handleAction(command, position, selection, data) {
switch (command) {
case 'search':// 查询
this.loadData()
break
case 'add':// 添加
this.handleEdit()
break
case 'edit':// 编辑
case 'detail':// 明细
ActionUtils.selectedRecord(selection).then((id) => {
this.handleEdit(id)
}).catch(() => { })
break
case 'remove':// 添加
ActionUtils.removeRecord(selection).then((ids) => {
this.handleRemove(ids)
}).catch(() => { })
break
case 'custom':// 自定义按钮
ActionUtils.selectedMultiRecord(selection).then((ids) => {
this.$alert(ids)
}).catch(() => { })
break
default:
break
}
},
/**
* 处理编辑
*/
handleEdit(editId) {
this.editId = editId || ''
this.dialogFormVisible = true
},
/**
* 处理删除
*/
handleRemove(ids) {
// 获取数据
remove({ ids: ids }).then(response => {
ActionUtils.removeSuccessMessage()
this.search()
}).catch(() => {
})
},
/**
* 前置事件
*
* @before-action-event="beforeActionEvent"
*/
beforeActionEvent(key, position, data, callback) {
callback(true)
},
/**
* 处理点击链接
*/
handleColumnLink(data, column) {
this.handleEdit(data.id)
}
}
}
</script>
获取内部值和方法
可以通过 ref 拿到表格组件实时数据以及内部方法。
...
this.$refs.crud.handleTableHeight()//获取表格高度
...
this.$refs.crud.clearSelection() //清除列表多选选中
...
以上为暂时个例的取值和方法通过ref进行调用,详细的请查看API进行使用。