一款根据element改造的组件文档
组件示例
</div>
<base-search :list="searchList" :extra_data="extra_data" @callback="getList">
<template slot="search"></template>
<template slot="btn">
<el-button type="primary">新增</el-button>
</template>
</base-search>
<base-table
:title="title"
:list="list"
:todos="todos"
:page="page"
@handleEdit="handleEdit"
@handleDelFlag="handleDelFlag"
@getList="getList">
<template slot="roleNames" slot-scope="{ item }">
<el-tag v-for="(i, l) in item.roleNames" :key="l">{{ i }}</el-tag>
</template>
<base-table>
</div>
<script>
export default {
data() {
return {
//搜索类型
searchList: [{
title: "关键词",
name: "key",
}],
// 表头
title: [{
title: "账号名",
name: "code",
}, {
title: "性别",
name: "sex",
tran_data: [
{ key: 0, value: ["男", "danger"]},
{ key: 1, value: ["女", "success"]},
],
}, {
title: "角色",
name: "roleNames",
type: "slot",
}, {
title: "是否启用",
name: "delFlag",
type: "switch", //因自身框架需求，默认0为打开的值，1为关闭的值
width: 120,
click_event: "handleDelFlag",
}],
todos:[ { title: "编辑", click_event: "handleEdit", width: "100", fixed: "right" }], //操作栏
extra_data: {}, //搜索入參
list: [], //列表数据
page:{}, //分页数据
};
},
methods: {
getList(page,pageSize) { //page页码；pageSize页数
let that = this;
let ajaxData = that.extra_data || {};
ajaxData.page = page || 1;
ajaxData.pageSize = pageSize || 50;
that.request({
url: "xxx",
method: "post",
data: ajaxData,
loading: 1,
}).then((ret) => {
that.list = ret.response.data;
that.page = ret.response;
});
},
handleEdit(idx,obj) {
//点击编辑 idx列表索引 obj整列数据
},
handleDelFlag(idx,obj) {
//点击启用禁用开关 idx列表索引 obj整列数据
},
}
}
</script>
实现效果
A32EEFC0A31F71885F32D07E9F3BD358.jpg
数据结构图
E2BDF04266DB4D6A76FDB9CCC087F30B.jpg
组件参数
baseSearch
Attribute 属性
list 搜索信息 Array {
title 显示名称 String 可选值：-
name 搜索入參 String 可选值：- 注意：当type=daterange 时，name=[开始时间字段,结束时间字段]
type 搜索类型 String 可选值："daterange(日期)/select(单选)/selectArray(多选)" 默认值："input"
value 默认数据 String/Number
options 选择列表 Array 支持 type= "select/selectArray" {
name 选择名称 String
id 选择的ID String/Number }
}
extra_data 搜索的数据入參 Object 默认值：{}/null
Slot 扩展
btn 搜索框扩展按钮 详细见示例
search 额外自定义添加内容
Events 事件
callback 调用获取数据方法，首次加载会调用一次 数据类型：Function 必填
baseTable
Attribute 属性
height 表格高度 String/Number 默认值：-
size Table的尺寸 String 可选值："medium/small/mini" 默认值：根据element默认设置
title 表格表头 Array {
title 表头名称 String 可选值：-
name 数据绑定 String 可选值：- 当type=img时可为String/Array
width 整列宽度 String/Number 可选值：- 默认值：自适应
minWidth 最小宽度 String/Number 可选值：-
maxWidth 最大宽度 String/Number 可选值：-
algin 对齐方式 String 可选值："left/center/right" 默认值："left"
fixed 列是否固定在左侧或者右侧 String 可选值："left/right" 默认值：无
type 绑定类型 String 可选值："img(图片)/time(日期)/switch(开关)/slot(自定义表内容)"
tran_data 根据name数据选择性显示 Array {
key 键值 String/Number
value 显示内容 Array value[0]显示内容 value[1]显示颜色(入參根据el-tag的type) }
click_event 点击方法 String 仅在"tran_data"或者"type=switch"有效
}
list 数据列表 Array 注意：如包涵children数组则必须有id字段，否则报错，此路径是走无限循环树状图（待优化）
page 数据分页 Object 当page=null时，无分页 数据结构请前往（数据结构图）查看
todos 右侧操作栏 Array {
title 显示文字 String
width 操作栏宽度 String/Number 仅第一个有效
fixed 列是否固定在左侧或者右侧 String 可选值："left/right" 默认值："right"
click_event 点击方法 String
}
isCloseOneAutoGetData 是否关闭首次自动获取数据 Boolean 默认值：true
isCheckbox 是否开启列表多选 Boolean 默认值：false
checkboxData 多选列表返回的值 默认值：[] 如获取不到加个修饰符sync尝试
isSort 是否显示列表序号 Boolean 默认值：false
Slot 扩展
slot="xxx" 仅支持title属性"type=slot"配合"name" 属性，具体看示例
Events 事件
getList 调用获取数据方法 参数 page(页码)，pageSize(页数) 必填
rowClick 回调点击表格 当某一行被点击时会触发该事件 参数：row, column, event
自定义事件 详见下文
自定义事件方法图解
06794B56F7CD518F137953AE7CB86446.jpg
basePage
//示例
<base-page :page="page" :isCloseOneAutoGetData="false" @getPageList="getList" />
getList(page, pageSize) {
let that = this;
let ajaxData = that.extra_data || {};
ajaxData.page = page || 1;
ajaxData.pageSize = pageSize || 50;
that.isTableLoading = true;
that.request({
url: "xxx",
data: ajaxData,
method: "post",
loading: 1,
}).then((ret) => {
that.list = ret.response.data;
that.page = ret.response;
});
},
Attribute 属性
page 数据分页 Object ，数据结构请前往（数据结构图）查看
isCloseOneAutoGetData 是否关闭首次自动获取数据 Boolean 默认值：true
Events 事件
getPageList 调用获取数据方法 参数 page(页码)，pageSize(页数)
技术支持： Element-UI Vue
