banana-table

github: banana-table

使用文档

简介

对element-ui的表格与分页做了一层分装。
主要用来简化一下编码流程：

1. 当有大量列的时候，需要编写重复的el-table-column标签。
2. 固有的分页交互。
3. 常见的表格行操作事件。
4. 常见的批量操作事件。

git地址

属性

1. tableOptions

   :tableOptions="{
       height: 300,
       maxHeight: 300,
       stripe: true,
       border: true
   }"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- height| 表格高度| number| 否| --| -- maxHeight| 表格最大高度| number| 否| --| -- stripe| 斑马条纹| boolean| 否| false| -- border| 边框| boolean| 否| false| --
2. pre-col-type

   pre-col-type="selection"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- pre-col-type| 首列功能| string| 否| --| selection/index/expand 当pre-col-type="selection"时,会显示表格批量操作工具栏。
3. data

   :data="[
     {field1: 'hello', field2: 'world', field3: 'hello world'},
     {field1: '你好', field2: '世界', field3: '你好世界'}
   ]"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- data| 表格数据| 数组<对象>| 是| []| -- 注意： 展示的列默认由colMap决定。本示例中data有三列，但是仅仅会展示出field1、field2两列，这是由于colMap（见下条）只配置了field1与field2,若要根据data中数据的字段来展示表格数据，需要配置byCol属性（见下下条）。
4. colMap

   :colMap="{
     field1: '字段一',
     field2: '字段二'
   }"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- colMap| 表头字典| object| 否| {}| -- 注意：表头字典中的 key 应当与data中数据项的 key 对应，若没有匹配的字典值，则会显示‘未命名字段’，此‘未命名字段’可通过属性 unnamedFieldText 进行修改。
5. byCol

   :byCol="true"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- byCol|byCol|boolean|否|false|-- 此属性为true时，根据data中的首个数据项来决定要展示的表格列。
6. total

   :total="400"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- total|总条数|number|true|0|-- 此数据用来生成页数，此值应当由后台返回给前端，或是根据相关数据计算出来。
   总条数指的是可查询数据条数的总合（即数据库表中数据的总条数）。
7. queryTableData

   :queryTableData="queryTableData"
   -----------------------------------------------------------------------------
   queryTableData(currentPage=1, pageSize=10) { // 设置第一次进入页面查询的默认值
     setTimeout(() => {
       // 在这里请求数据
       let data = [
         {field1: 'a', field2: 'b', field3: 'a & b'},
         {field1: 'c', field2: 'd', field3: 'c & d'}
       ];
       for(let i=0; i<100; i++) {
         data.push({field1: 'row-'+i + '-1', field2: 'row-' + i + '-2', field3: 'row-' + i + '-3'})
       }
       // 数据请求完成后，在这里设置表格中的数据
       this.data = data;
       // 设置总条数
       this.total = 400;
     }, 2000)
   }

8. show-tool-col

   :show-tool-col="true"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- show-tool-col|显示操作列|bolean|否|false|-- 开启末尾操作列。
   操作列中有自带的“详情”、“编辑”、“删除”三个默认定义按钮，分别通过 show-btn-detail、 show-btn-edit、show-btn-delete，来控制是否显示。
   其中删除按钮有默认定义的删除确认框交互。
   用户可以通过name为 toolCol 的 slot 来自定义操作列内容。
9. show-btn-detail

   :show-btn-detail="true"

   字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- show-btn-detail|显示详情按钮|bolean|否|false|--
10. btn-detail-text

    btn-detail-text="detail"

    字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- btn-detail-text|详情按钮文字|string|否|'详情'|--
11. show-btn-delete

    :show-btn-delete="true"

    字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- show-btn-delete|显示删除按钮|bolean|否|false|--
12. btn-delete-text

    btn-delete-text="delete"

    字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- btn-delete-text|删除按钮文字|string|否|'删除'|--
13. show-btn-edit

    :show-btn-edit="true"

    字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- show-btn-edit|显示编辑按钮|bolean|否|false|--
14. btn-edit-text

    btn-edit-text="edit"

    字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- btn-edit-text|编辑按钮文字|string|否|'编辑'|--
15. toolColLabel

    :toolColLabel="'操作'"

    字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- toolColLabel|操作列表头名|string|否|'操作'|--
16. layout

    layout="total, sizes, prev, pager, next, jumper"

    字段 | 名称 | 类型 | 是否必填 | 默认值 | 可选值 ---|---|---|---|---|--- layout|分页组件布局|string|否|'total, sizes, prev, pager, next, jumper' (多个选项用逗号分隔)|total, sizes, prev, pager, next, jumper

事件

1. @detail

   @detail="rowDetail"
   ---------------------------------------------
   rowDetail (row) {
       console.log(row)
   }

   需要配合show-tool-col和show-btn-detail使用。
   操作列中详情按钮点击后触发此事件。
   回调中row为操作行的数据。
2. @edit

   @edit="editRow"
   ---------------------------------------------
   editRow (row) {
       console.log(row)
   }

   需要配合show-tool-col和show-btn-edit使用。
   操作列中编辑按钮点击后触发此事件。
   回调中row为操作行的数据。
3. @delete

   @delete="deleteRow"
   ---------------------------------------------
   deleteRow (row) {
       console.log(row)
   }

   需要配合show-tool-col和show-btn-delete使用。
   操作列中删除按钮点击后触发此事件。
   回调中row为操作行的数据。
4. @multi-oparate

   @multi-oparate="multiOparate"
   ---------------------------------------------
   multiOparate(selectedRows) {
     console.log(selectedRows)
   }

   需要配合pre-col-type使用。
   当pre-col-type="selection"时有效。
   表工具栏中批量操作按钮点击后触发此事件。
   回调中selectedRows为被选中操作行的数据。

slot

1. multi-oparation

   <banana-table>
       <template slot-scope="scope" slot="multi-oparation">
           <el-button @click="multiOparate(scope.selectedRows)">删除</el-button>
           <el-button @click="multiOparate(scope.selectedRows)">拉黑</el-button>
       </template>
   </banana-table>
   -----------------------------------------------------------------------
   multiOparate(selectedRows) {
       console.log(selectedRows)
   }

2. tool-col

   <banana-table>
       <template slot-scope="scope" slot="tool-col">
           <el-button
               size="mini"
               type="text"
               @click="customButtonClicked(scope)">
               操作1
           </el-button>
           <el-button
               size="mini"
               type="text"
               @click="customButtonClicked(scope)">
               操作2
           </el-button>
       </template>
   </banana-table>
   -----------------------------------------------------------------------
   customButtonClicked (row) {
       console.log(row)
   }

   需要配合pre-col-type使用。
   当pre-col-type="selection"时会显示表格批量操作工具栏。
   表工具栏中批量操作按钮点击后触发此事件。
   回调中selectedRows为被选中操作行的数据。