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: 值