耀极客论坛

 找回密码
 立即注册
查看: 618|回复: 0

vue + element动态多表头与动态插槽

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:58:22 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue + element动态多表头与动态插槽,下面文章围绕vue + element动态多表头与动态插槽的相关资料展开文章的内容,具有一定的参考价值,需要的小伙伴可以参考一下,希望对大家有所帮助

一、需求

  满足用户自行配置表格,减少对系统代码维护量。

二、效果


  表头json:
  1. 说明:scope(字段名可另取)为是否对该列开启插槽。有propChildren包含多级表头。
复制代码
  1.    
  2. tableHead: [{
  3.     key: '1',
  4.     label: '日期',
  5.     prop: 'date',
  6.     width: '100',
  7.     headerAlign: 'center',
  8.     align: 'center',
  9.     scope: false,
  10.     sortable: true
  11.   },
  12.   {
  13.     key: '2',
  14.     label: '姓名',
  15.     prop: 'name',
  16.     width: '100',
  17.     headerAlign: 'center',
  18.     align: 'center',
  19.     scope: false,
  20.     sortable: false
  21.   },
  22.   {
  23.     key: '3',
  24.     label: '分析情况',
  25.     prop: 'analysis',
  26.     width: '100',
  27.     headerAlign: 'center',
  28.     propChildren: [{
  29.       key: '31',
  30.       label: '同比',
  31.       prop: 'TB',
  32.       width: '100',
  33.       headerAlign: 'center',
  34.       align: 'center',
  35.       scope: true,
  36.       sortable: true
  37.     },
  38.     {
  39.       key: '32',
  40.       label: '环比',
  41.       prop: 'HB',
  42.       width: '100',
  43.       headerAlign: 'center',
  44.       align: 'center',
  45.       scope: true,
  46.       sortable: true
  47.     },]
  48.   },
  49.   {
  50.     key: '4',
  51.     label: '金额',
  52.     prop: 'price',
  53.     width: '100',
  54.     headerAlign: 'center',
  55.     align: 'right',
  56.     scope: false,
  57.     sortable: true
  58.   },
  59.   {
  60.     key: '5',
  61.     label: '地址',
  62.     prop: 'address',
  63.     width: '',
  64.     headerAlign: 'left',
  65.     align: 'left',
  66.     scope: false,
  67.     sortable: false
  68.   }
  69.   ],
复制代码
三、全部代码
  1. ‹template>
  2.   ‹el-table
  3.     :data="tableData"
  4.     stripe
  5.     resizable
  6.     border
  7.     height="300"
  8.    
  9.   >
  10.     ‹el-table-column
  11.       type="index"
  12.       :index="indexMethod"
  13.       label="序号"
  14.       align="center"
  15.       width="60"
  16.     >
  17.     ‹/el-table-column>
  18.     ‹el-table-column
  19.       v-for="(item, index) in tableHead"
  20.       :key="index"
  21.       :prop="item.prop"
  22.       :label="item.label"
  23.       :width="item.width"
  24.       :align="item.align"
  25.       :headerAlign="item.headerAlign"
  26.       :sortable="item.sortable"
  27.       show-overflow-tooltip
  28.     >
  29.       ‹el-table-column
  30.         v-for="(item, index) in item.propChildren"
  31.         :key="index"
  32.         :prop="item.prop"
  33.         :label="item.label"
  34.         :width="item.width"
  35.         :align="item.align"
  36.         :headerAlign="item.headerAlign"
  37.         :sortable="item.sortable"
  38.         show-overflow-tooltip
  39.       >
  40.         ‹template slot-scope="scope">
  41.           ‹div v-if="item.scope === true">
  42.             ‹div v-if="scope.row[item.prop] == ''">
  43.               {{ scope.row[item.prop] }}
  44.             ‹/div>
  45.             ‹div v-else-if="scope.row[item.prop] > '0'">
  46.               {{ scope.row[item.prop] }}%‹i class="el-icon-caret-top">‹/i>
  47.             ‹/div>
  48.             ‹div v-else-if="scope.row[item.prop] ‹ '0'">
  49.               {{ scope.row[item.prop] }}%‹i class="el-icon-caret-bottom">‹/i>
  50.             ‹/div>
  51.           ‹/div>
  52.           ‹div v-else-if="scope.row[item.prop] ‹ '0'">
  53.             {{ scope.row[item.prop] }}
  54.           ‹/div>
  55.           ‹div v-else>{{ scope.row[item.prop] }}‹/div>
  56.         ‹/template>
  57.       ‹/el-table-column>
  58.       ‹template slot-scope="scope">
  59.           ‹div v-if="item.scope === true">
  60.             ‹div v-if="scope.row[item.prop] == ''">
  61.               {{ scope.row[item.prop] }}
  62.             ‹/div>
  63.             ‹div v-else-if="scope.row[item.prop] ‹ '0'">
  64.               {{ scope.row[item.prop] }}
  65.             ‹/div>
  66.              ‹div v-else-if="scope.row[item.prop] > '0'">
  67.               {{ scope.row[item.prop] }}
  68.             ‹/div>
  69.           ‹/div>
  70.         ‹div v-else>{{ scope.row[item.prop] }}‹/div>
  71.         ‹/template>
  72.     ‹/el-table-column>
  73.   ‹/el-table>
  74. ‹/template>
  75. ‹script>
  76. export default {
  77.   data() {
  78.     return {
  79.       // 单表头  是否对该列进行数据比较,靠scope来判断。
  80.       tableHead: [{
  81.         key: '1',
  82.         label: '日期',
  83.         prop: 'date',
  84.         width: '100',
  85.         headerAlign: 'center',
  86.         align: 'center',
  87.         scope: false,
  88.         sortable: true
  89.       },
  90.       {
  91.         key: '2',
  92.         label: '姓名',
  93.         prop: 'name',
  94.         width: '100',
  95.         headerAlign: 'center',
  96.         align: 'center',
  97.         scope: false,
  98.         sortable: false
  99.       },
  100.       {
  101.         key: '3',
  102.         label: '分析情况',
  103.         prop: 'analysis',
  104.         width: '100',
  105.         headerAlign: 'center',
  106.         propChildren: [{
  107.           key: '31',
  108.           label: '同比',
  109.           prop: 'TB',
  110.           width: '100',
  111.           headerAlign: 'center',
  112.           align: 'center',
  113.           scope: true,
  114.           sortable: true
  115.         },
  116.         {
  117.           key: '32',
  118.           label: '环比',
  119.           prop: 'HB',
  120.           width: '100',
  121.           headerAlign: 'center',
  122.           align: 'center',
  123.           scope: true,
  124.           sortable: true
  125.         },]
  126.       },
  127.       {
  128.         key: '4',
  129.         label: '金额',
  130.         prop: 'price',
  131.         width: '100',
  132.         headerAlign: 'center',
  133.         align: 'right',
  134.         scope: false,
  135.         sortable: true
  136.       },
  137.       {
  138.         key: '5',
  139.         label: '地址',
  140.         prop: 'address',
  141.         width: '',
  142.         headerAlign: 'left',
  143.         align: 'left',
  144.         scope: false,
  145.         sortable: false
  146.       }
  147.       ],
  148.       // 数据
  149.       tableData: [{
  150.         date: '2016-05-02',
  151.         name: '王小虎',
  152.         HB: '-1.1',
  153.         TB: '2.5',
  154.         price: '2982.01',
  155.         address: '上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1518 弄'
  156.       }, {
  157.         date: '2016-05-04',
  158.         name: '王小虎',
  159.         HB: '-0.28',
  160.         TB: '1.1',
  161.         price: '2982.01',
  162.         address: '上海市普陀区金沙江路 1517 弄'
  163.       }, {
  164.         date: '2016-05-01',
  165.         name: '王小虎',
  166.         HB: '28',
  167.         TB: '-0.11',
  168.         price: '2982.01',
  169.         address: '上海市普陀区金沙江路 1519 弄'
  170.       }, {
  171.         date: '2016-05-03',
  172.         name: '张三',
  173.         HB: '21',
  174.         TB: '2.11',
  175.         price: '-201.02',
  176.         address: '上海市普陀区金沙江路 1516 弄'
  177.       }, {
  178.         date: '2016-05-11',
  179.         name: '张三',
  180.         HB: '0.28',
  181.         TB: '-1.1',
  182.         price: '2982.01',
  183.         address: '上海市普陀区金沙江路 1516 弄'
  184.       }, {
  185.         date: '2016-05-02',
  186.         name: '王小虎',
  187.         HB: '-0.18',
  188.         TB: '-1.15',
  189.         price: '2982.01',
  190.         address: '上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1518 弄'
  191.       }, {
  192.         date: '2016-05-04',
  193.         name: '王小虎',
  194.         HB: '-1.01',
  195.         TB: '1.1',
  196.         price: '2982.01',
  197.         address: '上海市普陀区金沙江路 1517 弄'
  198.       }, {
  199.         date: '2016-05-01',
  200.         name: '王小虎',
  201.         HB: '-28',
  202.         TB: '2.11',
  203.         price: '2982.01',
  204.         address: '上海市普陀区金沙江路 1519 弄'
  205.       }, {
  206.         date: '2016-05-03',
  207.         name: '张三',
  208.         HB: '',
  209.         TB: '0.1',
  210.         price: '-200.01',
  211.         address: '上海市普陀区金沙江路 1516 弄'
  212.       }, {
  213.         date: '2016-05-11',
  214.         name: '张三',
  215.         HB: '18',
  216.         TB: '-0.81',
  217.         price: '2982.01',
  218.         address: '上海市普陀区金沙江路 1516 弄'
  219.       }],
  220.     }
  221.   },
  222.   methods: {
  223.     indexMethod(index) {
  224.       return index + 1;
  225.     }
  226.   }
  227. }
  228. ‹/script>
复制代码
  到此这篇关于vue + element动态多表头与动态插槽的文章就介绍到这了,更多相关vue + element动态多表头与动态插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:32 , Processed in 0.078317 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表