VUE结合Element-ui动态生成添删改查页面组件
文章目录
- VUE结合Element-ui动态生成添删改查页面组件
- 组件下载链接:
- 前言
- 先看看生成后的大概样子吧
- 使用示例
- crudTable Attributes
- list 数据示例
- tableHead Attributes
- tableHead setting Attrbutes
- tableHead 数据示例
- formBody Attrbutes
- formBody setting Attrbutes
- formBody 数据示例
- searchBody Attrbutes
- searchBody setting Attrbutes
- searchBody 数据示例
- exportExcelHead Attrbutes
- exportExcelHead head Attrbutes
- exportExcelHead 数据示例
- crudTable Events
前言
这篇文章是因为后台项目中添删改查的页面几乎都是差不多，于是本来就整合了一下element-ui下的几个组件，只需要传入json数据，页面就能自动根据json数据生成，大大见减少了重复代码，文章开头有本文章的对应文件，我就不贴文件代码了(太长了)
PS:文章使用的是VUE+Element-UI整合
先看看生成后的大概样子吧
使用示例
<template>
<div>
<crud-table
theme-name="按键设置"
:list="keyList"
:form-body="formBody"
:search-body="searchBody"
:table-head="tableHead"
@del="doDel"
@add="doAdd"
@search="doSearch"
@delSelection="doDelSelection"
>
</crud-table>
</div>
</template>
<script>
import * as keyword from '@/api/subAdmin/keyWord'
export default {
data() {
return {
keyList:[],
tableHead:[],
formBody:[
{
fieldKey:'keyword_num',
fieldName:'按键变量',
fieldType:'text',
setting:{
text:{
placeholder:'请输入按键变量'
}
}
},
{
fieldKey:'description',
fieldName:'语音描述',
fieldType:'text',
setting:{
text:{
placeholder:'请输入语音描述'
}
}
},
{
fieldKey:'call_center_id',
fieldName:'呼叫中心id',
fieldType:'text',
setting:{
text: {
placeholder: '请输入呼叫中心id(之后就是自己获取呼叫中心id)'
}
}
}
],
searchBody:[],
exportExcelHead:{},
}
},
computed: {},
created() {
this.getAll();
},
methods: {
getAll() {
console.log("getAll")
},
// 删除回调
doDel(row){
console.log(row)
// keyword.delKeyWordById(row)
},
// 添加回调
doAdd(formEntity){
console.log(JSON.stringify(Entity))
let data={
create_keyword_info: Entity
}
keyword.createKeyWord(data)
},
// 搜索回调
doSearch(searchEntity){
console.log(searchEntity)
},
// 删除所有行回调
doDelSelection(selections){
console.log(selections)
},
// 修改回调
doEdit(fromEntity){
console.log(fromEntity)
},
}
}
</script>
<style scoped>
</style>crudTable Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
themeName | 主题名 列:分类 | String | – | 主题 |
needAdd | 是否需要添加按钮 | Boolean | – | true |
needDel | 是否需要删除按钮 | Boolean | – | true |
needEdit | 是否需要修改按钮 | Boolean | – | true |
needSearch | 是否需要搜索按钮 | Boolean | – | true |
needAction | 是否需要操作字段 | Boolean | – | true |
needPagination | 是否需要分页(暂时未集成) | Boolean | – | false |
needSelection | 是否需要多选列 | Boolean | – | true |
needExportExcel | 是否需要导出表格 | Boolean | – | true |
needRefresh | 是否需要刷新按钮 | Boolean | – | true |
list | 表格具体数据 | Array | – | 见下表 |
tableId | 表list数据中的ID字段名称 用于删除操作(如果不传的话删除操作返回当前行) | String | – | id |
tableHead | 需要显示的表头(数据来源于list中) | Array | – | 见tableHead Attributes |
formBody | 表单需要字段(点击修改和添加时显示的表单) | Array | – | 见formBody Attributes |
searchBody | 搜索时需要的字段(顶部搜索显示的条件) | Array | – | 见searchBody Attributes |
tableLoading | 表格body是否加载中(用于数据请求的时候) | Boolean | – | false |
saveLoading | 保存按钮是否加载中(用于数据请求的时候) | Boolean | – | false |
delLoading | 删除按钮是否加载中(用于数据请求的时候) | Boolean | – | false |
editLoading | 修改按钮是否加载中(用于数据请求的时候) | Boolean | – | false |
buttonSize | 顶部按钮大小 | String | medium / small / mini | medium |
exportExcelHead | 导出的表格头 | Object | – | 见exportExcelHead Attributes |
list 数据示例
// 表格数据
list: {
type: Array,
default: function() {
return [
{
id: '1',
userName: 'Mr.He',
password: '123456',
switchValue: true,
checkBoxValue: []
},
{
id: '2',
userName: 'Mr.Ming',
password: '789123',
selectValue: 'HeXunFang',
radioValue: '单选按钮1',
checkBoxValue: ['复选框1', '复选框2', '复选框3', '复选框1', '复选框2', '复选框3']
}]
}
},tableHead Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
key | 表头对应List中的字段名称 | String | – | – |
value | 表头显示名称 | String | – | – |
type | 表格列的类型 | String | text/switch | – |
setting | 当类型为switch时，这个值是必须得，你可以为空，但是要声明这字段 | Object | – | 见setting Attributes |
tableHead setting Attrbutes
setting相关解释
tableHead 数据示例
// 需要展示的表头 ps:通过key拿到list中的数据 value是表头中文名
// params:[{
// key:"String",
// value:"String",
// type:"text"||"Switch"
// }]
tableHead: {
type: Array,
default: function() {
return [
{
key: 'userName',
value: '用户名',
type: 'text'
},
{
key: 'switchValue',
value: '开关',
type: 'switch',
setting: {
no: '正常',
off: '封禁'
}
},
{
key: 'checkBoxValue',
value: '复选框',
type: 'checkBox'
}
]
}
},formBody Attrbutes
参数 | 说明 | 类型 | 可选值 | 默认值 |
fieldName | 表单字段名称(input框前面) | String | – | – |
fieldKey | 表单对应表头中的字段key(修改时获取数据) | String | – | – |
fieldType | 表单字段类型 | String | text/checkBox/radio/select/switch | – |
setting | 相关设置 | Object | – | 见 formBody setting Attrbutes |
formBody setting Attrbutes
参数 | 说明 | 类型 | 可选值 | 默认值 |
text | 类型为text相关设置 | Object | {placeholder(输入框提示)} | – |
checkBox | 类型为checkBox相关设置 | Object | {checkBoxItem:[{lable:‘复选框的值’)}]} | – |
radio | 类型为radio相关设置 | Object | {radioItem:[{label:‘选项值’}]} | – |
select | 类型为select相关设置 | Object | option:[{label:‘下拉选项展示’，value:‘选中的值’}] | – |
switch | 类型为switch相关设置 | Object | disabled:false(是否禁用) |
formBody 数据示例
// 表单字段
// params:[
// {
// fieldName:"String", //字段中文名
// fieldKey:"String" //表单数据字段key
// fieldType:"text"||"select"||"radio"||"checkBox"||"DatePicker"||"Switch"||"textarea" //类型
// options:{
// text:{placeholder:"提示信息"}
// select:{相关设置}
// }
// }
// ]
formBody: {
type: Array,
default: function() {
return [
{
fieldName: '文本',
fieldKey: 'userName',
fieldType: 'text',
setting: {
text: {
placeholder: '请输入项目名'
}
}
},
{
fieldName: '复选框',
fieldKey: 'checkBoxValue',
fieldType: 'checkBox',
setting: {
checkBox: {
checkBoxItem: [
{
label: '复选框1'
},
{
label: '复选框2'
},
{
label: '复选框3'
},
{
label: '复选框4'
}
]
}
}
},
{
fieldName: '单选框',
fieldKey: 'radioValue',
fieldType: 'radio',
setting: {
radio: {
radioItem: [
{
label: '单选按钮1'
},
{
label: '单选按钮2'
}
]
}
}
},
{
fieldName: '下拉框',
fieldKey: 'selectValue',
fieldType: 'select',
setting: {
select: {
option: [
{
label: '下拉选择项1',
value: 'HeXunFang',
disabled: true
},
{
label: '下拉选择项2',
value: 'test2'
},
{
label: '下拉选择3',
value: 'test3'
}
]
}
}
},
{
fieldName: '开关',
fieldKey: 'switchValue',
fieldType: 'switch',
setting: {
switch: {
disabled: false
}
}
}
]
}
},searchBody Attrbutes
参数 | 说明 | 类型 | 可选值 | 默认值 |
searchName | 搜索字段名称 | String | – | – |
searchKey | 搜索字段key(最好跟tableKey一样,不过也无所谓，最后返回的是一个实体给页面) | |||
searchType | 搜索框的类型 | String | text/select/date | – |
setting | 相关类型设置 | Object | – | 见searchBody setting Attrbutes |
searchBody setting Attrbutes
参数 | 说明 | 类型 | 可选值 | 默认值 |
placeholder | 对应类型是(text/select)可用 | String | – | – |
options | 对应类型select可用 | Object | {options:[{label:‘选项’,value:‘选项value’}] | – |
format | 对应类型date可用 | String | 参考element-ui官方时间组件 | timestamp |
searchBody 数据示例
// 搜索条件的输入框
searchBody: {
type: Array,
default: function() {
return [
{
searchName: '用户名',
searchKey: 'userName',
searchType: 'text',
setting: {
placeholder: '搜索用户名'
}
},
{
searchName: '用户名',
searchKey: 'userName1',
searchType: 'select',
setting: {
options: [
{
label: '选项一',
value: '1'
}
],
placeholder: '搜索用户名'
}
},
{
searchName: '用户名',
searchKey: 'userName1',
searchType: 'select',
setting: {
options: [
{
label: '选项一',
value: '1'
}
],
placeholder: '搜索用户名'
}
},
{
searchName: '用户名',
searchKey: 'date',
searchType: 'date',
setting: {
// 参考element-ui 时间选择组件
format:'timestamp'
}
}
]
}
},exportExcelHead Attrbutes
参数 | 说明 | 类型 | 可选值 | 默认值 |
fileName | 导出表格名称 | String | – | – |
format | 导出数据表格式 | String | xlsx/json | xlsx |
autoWidth | 表格是否自动宽度 | Boolean | fasle/true | true |
head | 所需要导出的表头 | Object | 见exportExcelHead head Attrbutes | – |
exportExcelHead head Attrbutes
参数 | 说明 | 类型 | 可选值 | 默认值 |
exFieldName | 导出表头名称 | String | – | test |
exFieldKey | 导出表头对应的key(与list字段key相关联) | String | – | – |
exportExcelHead 数据示例
// 导出表格的表头 如果没有字段,则导出全部字段
exportExcelHead: {
type: Object,
default: function() {
return {
fileName: this.themeName + '数据表',
format: 'xlsx',
autoWidth: true,
head: [
{
// 表头名
exFieldName: '用户名',
// 表头对应表格list中的字段key
exFieldKey: 'userName'
}
]
}
}
}crudTable Events
事件名称 | 说明 | 回调参数 |
Add | 添加提交的回调 | formEntity |
Del | 删除行的回调 | 如果this.tableId不为空的话返回选中行中this.tableId字段的值/否则返回当前行 |
Edit | 修改提交的回调 | formEntity |
Search | 查询提交的回调 | searchEntity(查询的条件) |
DelSelection | 删除选中行的回调 | selections(选中的row) |
