常用table组件封装（函数组件，render函数，动态slot）

我就是我 2021-09-03 10:19 762阅读 0赞

功能：  
1，key-value类型的展示（如图），自定义单元格宽度  
2，value支持显示省略号，自带title, 合并格（列）  
3, value单元格支持使用render,slot,html自定义功能

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70_pic_center]

使用示例：

egData试用主组件的示例

<CustomerTable :tableData="egData" >
               <template slot-scope="{value}" slot="name">
                 slot渲染： { { value}}
               </template>
              <template slot-scope="{value}" slot="rys">
                <el-button size="mini" type="primary"> { { value}}</el-button>
               </template>
            </CustomerTable>

源码：

## 1， table主组件 ##

<template>
      <table class="c-table">
        <tr class="c-tr" v-for="(item, index) in tableData" :key="index">
          <template v-for="(item2, i) in item">
            <td class="c-td c-td-key" :width="item2.keyWidth ? item2.keyWidth : ''" :key="i">
              { {  item2.key }}
            </td>
            <td
              :class="['c-td', 'c-td-val', { ellipsis: item2.showEllipsis }]"
              :width="item2.valueWidth ? item2.valueWidth : ''"
              :colspan="item2.colspan ? item2.colspan : ''"
              :key="i"
            >
              <table-cell-render v-if="item2.type === 'render'" :value="item2.value" :render="item2.render"></table-cell-render>
              <table-cell-slot v-else-if="item2.type ==='slot'" :value="item2.value" :slot="item2.slot"></table-cell-slot>
              <div v-else-if="item2.type ==='html'" v-html="item2.value"></div>
              <span v-else :title="item2.value" >
                { {  item2.value }}
              </span>
            </td>
          </template>
        </tr>
      </table>
    </template>
    
    <script>
    import TableCellRender from "./table-cell-render"
    import TableCellSlot from "./table-cell-slot"
    export default { 
      props: { 
        tableData: { 
          type: Array,
          default: () => []
        }
      },
      components:{ TableCellRender,TableCellSlot},
      provide () { 
          return { 
              tableRoot: this
          };
      }
    }
    </script>
    
    <style lang="less" scoped>
    .c-table { 
      width: 100%;
      background: white;
      table-layout: fixed;
    }
    .c-table,
    .c-tr,
    .c-td { 
      border: 1px solid #dbdbdb;
      box-sizing: border-box;
    }
    .c-td { 
      padding: 12px 0;
      word-wrap: break-word;
      word-break: break-all;
      white-space: normal;
    }
    .c-td-key { 
      background:  #f5f7fa;
      text-align: right;
      padding-right: 10px;
      font-size: 12px;
      color: #666666;
    }
    .c-td-val { 
      text-align: left;
      padding-left: 10px;
      font-size: 12px;
      color: #333333;
    }
    .ellipsis { 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }
    </style>

## 2，单元格render组件table-cell-render.js ##

export default { 
      name: 'TableCellRender',
      functional: true,
      props: { 
        render: Function,
        value: [Object, String, Array, Number]
      },
      render: (h, ctx) => { 
        const params = { 
          value: ctx.props.value
        };
    
        return ctx.props.render(h, params);
      }
    };

## 3，单元格slot组件 table-cell-slot.js ##

export default { 
        name: 'TableCellSlot',
        functional: true,
        inject: ['tableRoot'],
        props: { 
            value: [Object, String, Array, Number],
            slot: String
        },
        render: (h, ctx) => { 
            return h('div', ctx.injections.tableRoot.$scopedSlots[ctx.props.slot]({ 
                value: ctx.props.value
            })
            );
        }
    };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/cbb116d17cc24892b4cede618cbd38bc.png