VUE结合Element-ui动态生成添删改查页面组件
组件下载链接:
组件附件下载链接
前言
这篇文章是因为后台项目中添删改查的页面几乎都是差不多，于是本来就整合了一下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)
},
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 数据示例
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 数据示例
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: {
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: '用户名',
exFieldKey: 'userName'
}
]
}
}
}
crudTable Events
| 事件名称 | 说明 | 回调参数 |
|---|
| Add | 添加提交的回调 | formEntity |
| Del | 删除行的回调 | 如果this.tableId不为空的话返回选中行中this.tableId字段的值/否则返回当前行 |
| Edit | 修改提交的回调 | formEntity |
| Search | 查询提交的回调 | searchEntity(查询的条件) |
| DelSelection | 删除选中行的回调 | selections(选中的row) |
扫一扫
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
