介绍

fish-select 是基于Element UI 的 Table 表格 封装的组件，简化了column的配置，大大提升了开发效率，并保持原有的表格的参数及事件。

用法

基础用法

image.png

  1. <template>
  2.     <fish-table :tableData='tableData' :columns='columns' :showPage='false' sum-text='总计'    ></fish-table>
  3. </template>
  4. <script>
  5. export default {
  6.   data () {
  7.     return {
  8.        columns: [
  9.           {
  10.             prop: 'id',
  11.             label: 'ID'
  12.           },
  13.           {
  14.             prop: 'name',
  15.             label: '姓名'
  16.           },
  17.           {
  18.             prop: 'amount1',
  19.             label: '数值1',
  20.             sortable: true
  21.           },
  22.           {
  23.             prop: 'amount2',
  24.             label: '数值2',
  25.             sortable: true,
  26.             isSummary:true,
  27.           },
  28.           {
  29.             prop: 'amount3',
  30.             label: '数值3',
  31.             sortable: true,
  32.             isSummary:true,
  33.             unit:'元',
  34.             isCurrency:true
  35.           }
  36.         ],
  37.         tableData: [
  38.           {
  39.             id: '12987122',
  40.             name: '王小虎',
  41.             amount1: '234',
  42.             amount2: '3',
  43.             amount3: 10
  44.           },
  45.           {
  46.             id: '12987123',
  47.             name: '王小虎',
  48.             amount1: '165',
  49.             amount2: '4',
  50.             amount3: 12
  51.           },
  52.           {
  53.             id: '12987124',
  54.             name: '王小虎',
  55.             amount1: '324',
  56.             amount2: '1',
  57.             amount3: 9
  58.           },
  59.           {
  60.             id: '12987125',
  61.             name: '王小虎',
  62.             amount1: '621',
  63.             amount2: '2',
  64.             amount3: 17
  65.           },
  66.           {
  67.             id: '12987126',
  68.             name: '王小虎',
  69.             amount1: '539',
  70.             amount2: '4',
  71.             amount3: 15
  72.           }
  73.         ]
  74.     }
  75.   }
  76. }
  77. </script>

多级表头、排序、多选

image.png

  1. <template>
  2.   <div>
  3.     <fish-table
  4.       :table-data="tableData"
  5.       ref="mtable"
  6.       :columns="columns"
  7.       :showPage="false"
  8.       selection
  9.       @selection-change="selectChange"
  10.       height="400"
  11.       :showNum="false"
  12.      >
  13.       <template slot="date" slot-scope="scope">{{scope.row.date}}</template>
  14.     </fish-table>
  15.     <br>
  16.     <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
  17.     <el-button @click="toggleSelection()">取消选择</el-button>
  18.   </div>
  19. </template>
  20. <script>
  21. export default {
  22.   data() {
  23.     return {
  24.       tableData: [],
  25.       columns: [
  26.         {
  27.           prop: "date",
  28.           fixed: true,
  29.           sortable: true,
  30.           width: "120",
  31.           renderHeader: (h, scope) => {
  32.             return (
  33.               <span>
  34.                 <i class="el-icon-time" />日期
  35.               </span>
  36.             );
  37.           }
  38.         },
  39.         {
  40.           label: "配送信息",
  41.           children: [
  42.             {
  43.               prop: "name",
  44.               width: "120",
  45.               render: (h, scope) => {
  46.                 return <el-tag>{scope.row.name}</el-tag>;
  47.               }
  48.             },
  49.             {
  50.               label: "地址",
  51.               children: [
  52.                 {
  53.                   prop: "province",
  54.                   label: "省份",
  55.                   width: "120"
  56.                 },
  57.                 {
  58.                   prop: "city",
  59.                   label: "市区",
  60.                   width: "120"
  61.                 },
  62.                 {
  63.                   prop: "address",
  64.                   label: "地址",
  65.                   sortable: true,
  66.                   width: "300px",
  67.                   renderHeader: (h, scope) => {
  68.                     return (
  69.                       <span>
  70.                         <i class="el-icon-location-outline" />地址
  71.                       </span>
  72.                     );
  73.                   }
  74.                 }
  75.               ]
  76.             }
  77.           ]
  78.         }
  79.       ]
  80.     };
  81.   },
  82.   created() {
  83.     for (let i = 0; i < 10; i++) {
  84.       this.tableData.push({
  85.         date: `2016-05-${i + 1}`,
  86.         name: `王小虎${i + 1}`,
  87.         province: "上海",
  88.         city: "普陀区",
  89.         address: `上海市普陀区金沙江路 ${i + 1} 弄`,
  90.         zip: 200333
  91.       });
  92.     }
  93.   },
  94.   methods: {
  95.     selectChange(arr) {
  96.       console.log(arr);
  97.     },
  98.     toggleSelection(rows) {
  99.       if (rows) {
  100.         this.$refs.mtable.toggleRowSelection(rows);
  101.       } else {
  102.         this.$refs.mtable.clearSelection();
  103.       }
  104.     }
  105.   }
  106. };
  107. </script>

展开行

image.png

  1. <template>
  2.   <fish-table :columns="tableData.column"
  3.     :table-data="tableData.data" expand :showNum='false' :border='false'>
  4.     <template slot="expand" slot-scope="{row}">
  5.       <fish-form :model='row' :columns='columns' class="demo-table-expand"></fish-form>
  6.     </template>
  7.   </fish-table>
  8. </template>
  10. <script>
  11. export default {
  12.   data () {
  13.     return {
  14.       columns:[
  15.         {
  16.           label:'商品名称',
  17.           prop:'name'
  18.         },{
  19.           label:'所属店铺',
  20.           prop:'shop'
  21.         },{
  22.           label:'商品 ID',
  23.           prop:'id'
  24.         },{
  25.           label:'店铺 ID',
  26.           prop:'shopId'
  27.         },{
  28.           label:'商品分类',
  29.           prop:'category'
  30.         },{
  31.           label:'店铺地址',
  32.           prop:'address'
  33.         },{
  34.           label:'商品描述',
  35.           prop:'desc',
  36.           span:22
  37.         }
  38.       ],
  39.       tableData: {
  40.         column: [
  41.           {
  42.             prop: 'id',
  43.             label: 'ID'
  44.           },
  45.           {
  46.             prop: 'name',
  47.             label: '商品名称'
  48.           },
  49.           {
  50.             prop: 'desc',
  51.             label: '描述'
  52.           }
  53.         ],
  54.         data: [
  55.           {
  56.             id: '12987122',
  57.             name: '好滋好味鸡蛋仔',
  58.             category: '江浙小吃、小吃零食',
  59.             desc: '荷兰优质淡奶，奶香浓而不腻',
  60.             address: '上海市普陀区真北路',
  61.             shop: '王小虎夫妻店',
  62.             shopId: '10333'
  63.           },
  64.           {
  65.             id: '12987123',
  66.             name: '好滋好味鸡蛋仔',
  67.             category: '江浙小吃、小吃零食',
  68.             desc: '荷兰优质淡奶，奶香浓而不腻',
  69.             address: '上海市普陀区真北路',
  70.             shop: '王小虎夫妻店',
  71.             shopId: '10333'
  72.           },
  73.           {
  74.             id: '12987125',
  75.             name: '好滋好味鸡蛋仔',
  76.             category: '江浙小吃、小吃零食',
  77.             desc: '荷兰优质淡奶，奶香浓而不腻',
  78.             address: '上海市普陀区真北路',
  79.             shop: '王小虎夫妻店',
  80.             shopId: '10333'
  81.           },
  82.           {
  83.             id: '12987126',
  84.             name: '好滋好味鸡蛋仔',
  85.             category: '江浙小吃、小吃零食',
  86.             desc: '荷兰优质淡奶，奶香浓而不腻',
  87.             address: '上海市普陀区真北路',
  88.             shop: '王小虎夫妻店',
  89.             shopId: '10333'
  90.           }
  91.         ]
  92.       }
  93.     }
  94.   }
  95. }
  96. </script>
  98. <style>
  99.   .demo-table-expand label {
  100.     color: #99a9bf;
  101.   }
  103. </style>

合计行

自动合计只需在需要合并的列sSummary为true,unit 为单位,如果想要手动合并summaryMethod

  1. <template>
  2.   <fish-table :tableData='tableData' :columns='columns' :showPage='false' sum-text='总计'    ></fish-table>
  3. </template>
  4. <script>
  5. export default {
  6.   data () {
  7.     return {
  8.        columns: [
  9.           {
  10.             prop: 'id',
  11.             label: 'ID'
  12.           },
  13.           {
  14.             prop: 'name',
  15.             label: '姓名'
  16.           },
  17.           {
  18.             prop: 'amount1',
  19.             label: '数值1',
  20.             sortable: true
  21.           },
  22.           {
  23.             prop: 'amount2',
  24.             label: '数值2',
  25.             sortable: true,
  26.             isSummary:true,
  27.           },
  28.           {
  29.             prop: 'amount3',
  30.             label: '数值3',
  31.             sortable: true,
  32.             isSummary:true,
  33.             unit:'元',
  34.             isCurrency:true
  35.           }
  36.         ],
  37.         tableData: [
  38.           {
  39.             id: '12987122',
  40.             name: '王小虎',
  41.             amount1: '234',
  42.             amount2: '3',
  43.             amount3: 10
  44.           },
  45.           {
  46.             id: '12987123',
  47.             name: '王小虎',
  48.             amount1: '165',
  49.             amount2: '4',
  50.             amount3: 12
  51.           },
  52.           {
  53.             id: '12987124',
  54.             name: '王小虎',
  55.             amount1: '324',
  56.             amount2: '1',
  57.             amount3: 9
  58.           },
  59.           {
  60.             id: '12987125',
  61.             name: '王小虎',
  62.             amount1: '621',
  63.             amount2: '2',
  64.             amount3: 17
  65.           },
  66.           {
  67.             id: '12987126',
  68.             name: '王小虎',
  69.             amount1: '539',
  70.             amount2: '4',
  71.             amount3: 15
  72.           }
  73.         ]
  74.     }
  75.   }
  76. }
  77. </script>

合并单元格

自动合并单元格传入需要合并的行和列的字段，列的合并是根据值相同合并，行的合并是根据当前属性后的几个字段为undefined 如果要手动合并传入span-method方法

  1. <template>
  2.   <fish-table :tableData='tableData' :columns='columns' :showPage='false' :showNum='false'
  3.   :merge-row='mergeRow'
  4.   :merge-column='mergeColumn'
  5.   ></fish-table>
  6. </template>
  7. <script>
  8. export default {
  9.   data () {
  10.     return {
  11.       mergeColumn:['amount1'],
  12.       mergeRow:['name'],
  13.        columns: [
  14.           {
  15.             prop: 'id',
  16.             label: 'ID'
  17.           },
  18.           {
  19.             prop: 'name',
  20.             label: '姓名'
  21.           },
  22.           {
  23.             prop: 'amount1',
  24.             label: '数值1',
  25.             sortable: true
  26.           },
  27.           {
  28.             prop: 'amount2',
  29.             label: '数值2',
  30.             sortable: true
  31.           },
  32.           {
  33.             prop: 'amount3',
  34.             label: '数值3',
  35.             sortable: true
  36.           }
  37.         ],
  38.         tableData: [
  39.           {
  40.             id: '12987122',
  41.             name: '王小虎',
  42.             amount1: '234',
  43.             amount2: '3',
  44.             amount3: 10
  45.           },
  46.           {
  47.             id: '12987123',
  48.             name: '王小虎',
  49.             amount1: '165',
  50.             amount3: 12
  51.           },
  52.           {
  53.             id: '12987124',
  54.             name: '王小虎',
  55.             amount1: '324',
  56.             amount3: 9
  57.           },
  58.           {
  59.             id: '12987125',
  60.             name: '王小虎',
  61.             amount1: '621',
  62.             amount2: '2',
  63.             amount3: 17
  64.           },
  65.           {
  66.             id: '12987126',
  67.             name: '王小虎',
  68.             amount1: '539',
  69.             amount2: '4',
  70.             amount3: 15
  71.           }
  72.         ]
  73.     }
  74.   }
  75. }
  76. </script>

导出excel

  1. <template>
  2. <div>
  3.   <el-button type="primary" @click="exportExcel">导出excel</el-button>
  4.   <fish-table :tableData='tableData' :columns='columns' ref="mtable" :showPage='false' :showNum='false'></fish-table>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9.   data () {
  10.     return {
  11.        columns: [
  12.           {
  13.             prop: 'id',
  14.             label: 'ID'
  15.           },
  16.           {
  17.             prop: 'name',
  18.             label: '姓名',
  19.           },
  20.           {
  21.             prop: 'amount1',
  22.             label: '数值1',
  23.             sortable: true,
  24.           },
  25.           {
  26.             prop: 'amount2',
  27.             label: '数值2',
  28.             sortable: true,
  29.           },
  30.           {
  31.             prop: 'amount3',
  32.             label: '数值3',
  33.             sortable: true
  34.           }
  35.         ],
  36.         tableData: [
  37.           {
  38.             id: '12987122',
  39.             name: '王小虎',
  40.             amount1: '234',
  41.             amount2: '3',
  42.             amount3: 10
  43.           },
  44.           {
  45.             id: '12987123',
  46.             name: '王小虎',
  47.             amount1: '165',
  48.             amount2: '3',
  49.             amount3: 12
  50.           },
  51.           {
  52.             id: '12987124',
  53.             name: '王小虎',
  54.             amount2: '3',
  55.             amount1: '324',
  56.             amount3: 9
  57.           },
  58.           {
  59.             id: '12987125',
  60.             name: '王小虎',
  61.             amount1: '621',
  62.             amount2: '2',
  63.             amount3: 17
  64.           },
  65.           {
  66.             id: '12987126',
  67.             name: '王小虎',
  68.             amount1: '539',
  69.             amount2: '4',
  70.             amount3: 15
  71.           }
  72.         ]
  73.     }
  74.   },
  75.   methods: {
  76.     exportExcel(){
  77.       this.$refs.mtable.exportCsv({
  78.         filename:'导出excel'
  79.       })
  80.     }
  81.   }
  82. }
  83. </script>

拖拽行

需要指定row-key, drop为true,drop-change事件会返回顺序变化后的数据

  1. <template>
  2.   <fish-table :tableData='tableData' :columns='columns' :showPage='false' row-key='id' drop @drop-change='dropChange'    ></fish-table>
  3. </template>
  4. <script>
  5. export default {
  6.   data () {
  7.     return {
  8.        columns: [
  9.           {
  10.             prop: 'id',
  11.             label: 'ID'
  12.           },
  13.           {
  14.             prop: 'name',
  15.             label: '姓名'
  16.           },
  17.           {
  18.             prop: 'amount1',
  19.             label: '数值1',
  20.           },
  21.           {
  22.             prop: 'amount2',
  23.             label: '数值2',
  24.           },
  25.           {
  26.             prop: 'amount3',
  27.             label: '数值3',
  28.           }
  29.         ],
  30.         tableData: [
  31.           {
  32.             id: '12987122',
  33.             name: '王小虎1',
  34.             amount1: '234',
  35.             amount2: '3',
  36.             amount3: 10
  37.           },
  38.           {
  39.             id: '12987123',
  40.             name: '王小虎2',
  41.             amount1: '165',
  42.             amount2: '4',
  43.             amount3: 12
  44.           },
  45.           {
  46.             id: '12987124',
  47.             name: '王小虎3',
  48.             amount1: '324',
  49.             amount2: '1',
  50.             amount3: 9
  51.           },
  52.           {
  53.             id: '12987125',
  54.             name: '王小虎4',
  55.             amount1: '621',
  56.             amount2: '2',
  57.             amount3: 17
  58.           },
  59.           {
  60.             id: '12987126',
  61.             name: '王小虎5',
  62.             amount1: '539',
  63.             amount2: '4',
  64.             amount3: 15
  65.           }
  66.         ]
  67.     }
  68.   },
  69.   methods:{
  70.     dropChange(tableData){
  71.       this.tableData = tableData
  72.     }
  73.   }
  74. }
  75. </script>

配置项

封装的配置项及说明，其他配置和事件请参照 Table 表格

Props

字段 说明 类型 默认值
border 是否带有纵向边框 boolean true
tableData 表格数据 Array -
isTree 是否为树形表格 boolean false
layout 分页器组件布局 string ‘total,sizes,prev, pager, next, jumper’
showNum 是否显示序号列 boolean true
numTitle 序号列名称 string ‘序号’
selection 表格是否展示多选列 boolean false
expand 表格是否可以展开 boolean false
columns 表格描述列信息 Array -
page 分页信息 Object
pageSizes 可选择每页多少条数据 Array [15, 30, 45, 60]
mergeRow 可合并列字段 Array -
mergeColumn 可合并行字段 Array