常用table组件封装(函数组件,render函数, 动态slot)

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

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

效果图:
在这里插入图片描述

使用示例:

egData试用主组件的示例

  1. <CustomerTable :tableData="egData" >
  2. <template slot-scope="{value}" slot="name">
  3. slot渲染: { { value}}
  4. </template>
  5. <template slot-scope="{value}" slot="rys">
  6. <el-button size="mini" type="primary"> { { value}}</el-button>
  7. </template>
  8. </CustomerTable>

源码:

1, table主组件

  1. <!--
  2. @authors 秋刀鱼
  3. @version 1.0.0
  4. props: tableData
  5. type (render,slot,html, 默认为空, 直接显示value内容)
  6. 详细解释看示例data: egData
  7. const egData = [
  8. [
  9. // 每个二级arr,是一行
  10. {
  11. key: "示例key",
  12. keyWidth: 120, // key 单元格宽度,表格的特性只需要在第一行数据设置width
  13. value: "示例value示例value示例value示例value示例value示例value示例value示例value示例value",
  14. valueWidth: 200, // value 单元格宽度
  15. showEllipsis: true // value 当显示不下时是否显示 省略号
  16. },
  17. { key: "示例key", keyWidth: 120, value: "示例value" }
  18. ],
  19. [
  20. {
  21. key: "示例key",
  22. value: "示例value",
  23. type: "render",
  24. render: h => {
  25. return h(
  26. "el-input",
  27. {
  28. props: {
  29. size: "mini",
  30. value: this.renderInputValue // 在data声明默认值
  31. },
  32. on: {
  33. // 实现双向绑定
  34. input: value => {
  35. this.renderInputValue = value;
  36. }
  37. }
  38. },
  39. ""
  40. );
  41. }
  42. },
  43. {
  44. key: "示例key",
  45. value: "示例value-render",
  46. type: "render",
  47. render: h => { // 使用render函数自定义单元格内容
  48. return h(
  49. "div",
  50. {
  51. style: { color: "red" },
  52. on: {
  53. click: () => {
  54. alert("自定义事件");
  55. }
  56. }
  57. },
  58. "我是vue的render函数创建的"
  59. );
  60. }
  61. }
  62. ],
  63. [
  64. { key: "示例key", value: "合并单元格", colspan: 3 } // colspan 合并单元格列
  65. ],
  66. [{ key: "示例slot", value: "张三", colspan: 3, type: "slot", slot: "name" }],// 使用作用域slot在指定单元格插入组件
  67. [{ key: "示例slot", value: "阿里巴巴", colspan: 3, type: "slot", slot: "rys" }],
  68. [{ key: "示例html", value: "<b>自定义的b标签<br/>hah</b>", colspan: 3, type: "html" }] // 直接插入html
  69. ];
  70. -->
  71. <template>
  72. <table class="c-table">
  73. <tr class="c-tr" v-for="(item, index) in tableData" :key="index">
  74. <template v-for="(item2, i) in item">
  75. <td class="c-td c-td-key" :width="item2.keyWidth ? item2.keyWidth : ''" :key="i">
  76. { { item2.key }}
  77. </td>
  78. <td
  79. :class="['c-td', 'c-td-val', { ellipsis: item2.showEllipsis }]"
  80. :width="item2.valueWidth ? item2.valueWidth : ''"
  81. :colspan="item2.colspan ? item2.colspan : ''"
  82. :key="i"
  83. >
  84. <table-cell-render v-if="item2.type === 'render'" :value="item2.value" :render="item2.render"></table-cell-render>
  85. <table-cell-slot v-else-if="item2.type ==='slot'" :value="item2.value" :slot="item2.slot"></table-cell-slot>
  86. <div v-else-if="item2.type ==='html'" v-html="item2.value"></div>
  87. <span v-else :title="item2.value" >
  88. { { item2.value }}
  89. </span>
  90. </td>
  91. </template>
  92. </tr>
  93. </table>
  94. </template>
  95. <script>
  96. import TableCellRender from "./table-cell-render"
  97. import TableCellSlot from "./table-cell-slot"
  98. export default {
  99. props: {
  100. tableData: {
  101. type: Array,
  102. default: () => []
  103. }
  104. },
  105. components:{ TableCellRender,TableCellSlot},
  106. provide () {
  107. return {
  108. tableRoot: this
  109. };
  110. }
  111. }
  112. </script>
  113. <style lang="less" scoped>
  114. .c-table {
  115. width: 100%;
  116. background: white;
  117. table-layout: fixed;
  118. }
  119. .c-table,
  120. .c-tr,
  121. .c-td {
  122. border: 1px solid #dbdbdb;
  123. box-sizing: border-box;
  124. }
  125. .c-td {
  126. padding: 12px 0;
  127. word-wrap: break-word;
  128. word-break: break-all;
  129. white-space: normal;
  130. }
  131. .c-td-key {
  132. background: #f5f7fa;
  133. text-align: right;
  134. padding-right: 10px;
  135. font-size: 12px;
  136. color: #666666;
  137. }
  138. .c-td-val {
  139. text-align: left;
  140. padding-left: 10px;
  141. font-size: 12px;
  142. color: #333333;
  143. }
  144. .ellipsis {
  145. overflow: hidden;
  146. text-overflow: ellipsis;
  147. white-space: nowrap;
  148. word-break: normal;
  149. }
  150. </style>

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

  1. export default {
  2. name: 'TableCellRender',
  3. functional: true,
  4. props: {
  5. render: Function,
  6. value: [Object, String, Array, Number]
  7. },
  8. render: (h, ctx) => {
  9. const params = {
  10. value: ctx.props.value
  11. };
  12. return ctx.props.render(h, params);
  13. }
  14. };

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

  1. export default {
  2. name: 'TableCellSlot',
  3. functional: true,
  4. inject: ['tableRoot'],
  5. props: {
  6. value: [Object, String, Array, Number],
  7. slot: String
  8. },
  9. render: (h, ctx) => {
  10. return h('div', ctx.injections.tableRoot.$scopedSlots[ctx.props.slot]({
  11. value: ctx.props.value
  12. })
  13. );
  14. }
  15. };

发表评论

表情:
评论列表 (有 0 条评论,821人围观)

还没有评论,来说两句吧...

相关阅读