1.0.7 • Published 6 years ago
vue_big_table v1.0.7
vue-big-table
- 超级表格
- 基于element-ui
起步
npm i vue_big_table --save
代码
import vueBigTable from 'vue_big_table'
export default {
components: {
vueBigTable
}
}
参数解读
tab
属性(props)
show_tab: [Boolean][非必须] 是否显示tab栏,默认是true
tab: [Array][非必须] tab显示的文字
// 示例
[
{
text:'正式会员',
value:'1',
},
{
text:'回收站',
value:'2'
},
]
active_tab: [String][非必须] 高亮的tab,对应tab每一项的value
方法(emits)
changeTab(val): tab切换触发事件
参数val代表的是切换到tab的value值
button按钮
属性
btn: [Object][非必须] 按钮的统一设置
// 示例
btn:{
// 左侧按钮
left : [
{
// 按钮文字
text:'新增',
// 图标
icon: 'el-icon-plus',
// 冒泡出来的方法
methods: 'add',
// 按钮的样式
type: 'success'
}
],
// 右侧按钮
right:[
{
text:'新增',
icon: 'el-icon-plus',
methods: 'add',
// 按钮的样式
type: 'success'
},
// 下拉按钮组合
{
text: '筛选',
icon: 'el-icon-plus',
// 下拉的按钮methods必须是action
methods: 'action',
type: '',
// 下拉按钮的选项
options: [
{
// 显示的文字
text: '全部',
// 方法
method: 'all'
},
{
text: '已完成',
method: 'payed',
// 后面带分隔符
divided: true
},
{
text: '未完成',
method: 'unpaid'
}
]
}
]
}
方法
// 按钮触发事件
trigger_methods(method) 参数method是事件(定义按钮是传入事件)
插槽
// 左侧按钮插槽
<slot name="left_btn"></slot>
// 右侧按钮插槽
<slot name="right_btn"></slot>
// 按钮区域的搜索插槽
<slot name="table_search"></slot>
表格
属性(props)
tableData: [Array][必须] 表格数据
// 示例
tableData:[
{
username:'小明',
}
]
loading:[Boolean][非必须] 加载状态。默认是true
loading_text:[String][非必须] 加载时显示文本。默认是 拼命加载中...
table_fields:[Array][必须] 表格字段
// 示例
table_fields:[
{
// 左侧checkbox
type: 'selection',
// 固定在左侧
fixed: 'left'
},
{
// 字段中文名
field_remark: '渠道名称',
// 字段英文名
field_name: 'channel_name'
},
{
// 最右侧的编辑菜单
field_remark: '操作',
type: 'menu',
fixed: 'right'
},
{
// 开关的按钮
field_remark: '状态',
field_name: 'status',
// 需要按钮切换的设置为switch
type: 'switch',
class: 'demo',
method: 'chang_status',
status: {
// 0 对应数据tableData里面每一条数据status的值
'0': {
// 文本
text: '已关闭',
// css类
class: 'gray-color'
},
'1': {
text: '已开启',
class: 'green-color'
}
},
// 对应的显示字段(跟field_name一致)
status_field: 'status'
},
{
field_remark: '子渠道',
field_name: 'child_channel',
// 动态按钮
type: 'action',
class: 'demo',
// 决定显示与否的字段
show_field: 'child_channel',
method: 'child_channel',
// 显示哪些字段。外面处理好数据
dynamic_field: 'diy_text',
// 默认值
default: '-'
},
]
table_edit: [Array][非必须] 编辑菜单的按钮
// 示例
table_edit:[
{
// css的类
class: '',
// 冒泡时间
emit: 'edit',
// 文本
text: '编辑'
},
{
class: '',
emit: 'edit',
text: '编辑'
},
]
min_col : [Object][非必须] 每行最小宽度
// 示例
min_col:{
// 多选按钮最小宽度
selection: '60',
// 普通列的最小宽度
col: '160',
// 编辑最小宽度
edit: '120'
}
方法(emits)
col_method(method,data,index)
参数:
method 方法
data 操作一条数据
index 当前数据的索引
父组件获取该表格选中数据
let checked_data = this.$refs.vTable.returnSelected()
分页
属性
currentPage:[Number] 当前页码
total: [Number] 总条数
pageSize:[Number] 每一页条数
pageSizes: [Array] 条数[10,20,40]
方法
hadelPage(type,value) 切换分页
type: pageSize 一页条数
currentPage 当前页码
value: 值