banana-table v1.0.1

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为被选中操作行的数据。