devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

elemetui自定义表格实现可拖拽列、显示隐藏列、数据汇总、自适应宽度_elementui表格宽度拖动

作者：你好赵伟 | 2024-04-14 04:33:26

赞

踩

elementui表格宽度拖动

效果如下：

elemetui自定义表格实现可拖拽列、显示隐藏列、数据汇总、自适应宽度

1.可拖拽列

使用前需要先安装一个包

npm i -S vuedraggable

使用的时候需要注意几个地方：

第一个是必须设置row-key，你的值必须是唯一值，不一定是id也可以是其他的

第二个是你需要设置两个对象：Col和dropCol，这两个对象是保存每一列的label和prop的，虽然这两个是一样的，但是必须要设置两个，否则就会导致你拖拽替换只会替换每一列对应的值不会替换label。对象形式如下：

  1. const Col = ref([
  2.     {
  3.         label: '零件名称',
  4.         prop: 'partName',
  5.         status:true
  6.     },
  7.     {
  8.         label: '批次号',
  9.         prop: 'batchNo',
  10.         status:true
  11.     },
  12.     {
  13.         label: '发票号',
  14.         prop: 'invoiceNo',
  15.         status:true
  16.     },
  17.     {
  18.         label: '订单号',
  19.         prop: 'orderNo',
  20.         status:true
  21.     },
  22.     {
  23.         label: '箱号',
  24.         prop: 'boxNo',
  25.         status:true
  26.     },
  27.     {
  28.         label: '小箱号',
  29.         prop: 'caseNo',
  30.         status:true
  31.     }
  32. ])
  1. <el-table  :data="roleList"  show-summary row-key="id"
  2.             :summary-method="getSummaries">
  3.             <template v-for="(col,index) in Col" :key="index" >
  4.                 <el-table-column  :width="index==0? flexColumnWidth(col.prop, roleList):'300'"
  5.                 :label="col.label" :prop="col.prop" align="center" />
  6.             </template>
  7.  
  8.         </el-table>

然后下面是列拖拽的方法

  1. //列拖拽
  2. function columnDrop() {
  3.     const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
  4.     Sortable.create(wrapperTr, {
  5.         animation: 180,
  6.         delay: 0,
  7.         onEnd: evt => {
  8.             // 过滤掉dropCol为false的项
  9.             const oldItem = Col.value[evt.oldIndex];
  10.             Col.value.splice(evt.oldIndex, 1);
  11.             Col.value.splice(evt.newIndex, 0, oldItem); 
  12.             console.log(evt.oldIndex,evt.newIndex);
  13.  
  14.         }
  15.     })
  16. }
  17.  
  18. //需要在onMouted函数中调用一次
  19. onMounted(() => {
  20.  
  21.     columnDrop()
  22. })

2.自定义列宽

给每一列添加这个代码

:width="flexColumnWidth(dropCol[1].prop, tableData)"

如果只是想在某一列添加可以这样，宽度自定义

:width="index==0? flexColumnWidth(col.prop, roleList):'300'"

方法如下：

注意如果那一列的数据存在某一个是空值那么那一项就会不进入自适应宽度，把下面的注释掉就可以了；

  1. // 自适应表格列宽
  2. const flexColumnWidth = (str, tableData, flag = 'max') => {
  3.     // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
  4.     // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
  5.     // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
  6.  
  7.     str = str + ''
  8.     let columnContent = ''
  9.     if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
  10.         return
  11.     }
  12.     if (!str || !str.length || str.length === 0 || str === undefined) {
  13.         return
  14.     }
  15.  
  16.     if (flag === 'equal') {
  17.         // 获取该列中第一个不为空的数据(内容)
  18.         for (let i = 0; i < tableData.length; i++) {
  19.             if (tableData[i][str].length > 0) {
  20.                 // console.log('该列数据[0]:', tableData[0][str])
  21.                 columnContent = tableData[i][str]
  22.                 break
  23.             }
  24.         }
  25.     } else {
  26.         // 获取该列中最长的数据(内容)
  27.         let index = 0
  28.         for (let i = 0; i < tableData.length; i++) {
  29.             // 数据为空跳出循环
  30.             // if (tableData[i][str] === null) {
  31.             //     return
  32.             // }
  33.             const now_temp = tableData[i][str] + ''
  34.             const max_temp = tableData[index][str] + ''
  35.             if (now_temp.length > max_temp.length) {
  36.                 index = i
  37.             }
  38.         }
  39.         columnContent = tableData[index][str]
  40.     }
  41.     // console.log('该列数据[i]:', columnContent)
  42.     // 以下分配的单位长度可根据实际需求进行调整
  43.     let flexWidth = 0
  44.     columnContent = columnContent + ''
  45.     for (const char of columnContent) {
  46.         if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
  47.             // 如果是英文字符，为字符分配8个单位宽度
  48.             flexWidth += 12
  49.         } else if (char >= '\u4e00' && char <= '\u9fa5') {
  50.             // 如果是中文字符，为字符分配15个单位宽度
  51.             flexWidth += 15
  52.         } else {
  53.             // 其他种类字符，为字符分配15个单位宽度
  54.             flexWidth += 12
  55.         }
  56.     }
  57.     if (flexWidth < 80) {
  58.         // 设置最小宽度
  59.         flexWidth = 80
  60.     }
  61.     // if (flexWidth > 250) {
  62.     //   // 设置最大宽度
  63.     //   flexWidth = 250
  64.     // }
  65.     return flexWidth + 'px'
  66. }

3.显示隐藏列

通过v-if命令动态修改你每一列是否显示

设置一个对象，包含你每一列的项

  1. const dropCol = ref([
  2.     {
  3.         label: '零件名称',
  4.         prop: 'partName',
  5.         status:true
  6.     },
  7.     {
  8.         label: '批次号',
  9.         prop: 'batchNo',
  10.         status:true
  11.     },
  12.     {
  13.         label: '发票号',
  14.         prop: 'invoiceNo',
  15.         status:true
  16.     },
  17.     {
  18.         label: '订单号',
  19.         prop: 'orderNo',
  20.         status:true
  21.     },
  22.     {
  23.         label: '箱号',
  24.         prop: 'boxNo',
  25.         status:true
  26.     },
  27.     {
  28.         label: '小箱号',
  29.         prop: 'caseNo',
  30.         status:true
  31.     }
  32. ])

控制列的面板：el-popover是一个弹框，然后里面自定义多选框内容

  1. <el-popover placement="bottom-start" :width="600" trigger="hover">
  2.       <transition name="fade">
  3.           <div>
  4.               <div>选择需要显示的列</div>
  5.               <div>
  6.                   <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  7.                   <el-checkbox v-for="(item, index) in dropCol" :key="index" @change="handleCheckedBoxChange" v-model="item.status">{{item.label}}</el-checkbox>
  8.               </div>
  9.           </div>
  10.       </transition>
  11.       <template #reference>
  12.           <el-button icon="Setting">显示列</el-button>
  13.       </template>
  14.   </el-popover>

全选和复选的方法

  1. function handleCheckAllChange() {
  2.     dropCol.value.forEach(item => {
  3.       item.status = checkAll.value;
  4.     });
  5. }
  6. function handleCheckedBoxChange() {
  7.   const allTrue = dropCol.value.every(item => item.status === true);
  8.   Col.value=dropCol.value.filter(item=>item.status==true)
  9.   if (allTrue) {
  10.       checkAll.value = true
  11.   } else {
  12.       checkAll.value = false
  13.   }
  14.     
  15. }

4.自定义汇总

表格需要添加show-summary   :summary-method="getSummaries"

<el-table :data="roleList" show-summary :summary-method="getSummaries">

方法如下：

  1. // 自定义汇总方法
  2. const getSummaries = (param) => {
  3.     const { columns, data } = param
  4.     const sums = []
  5.     columns.forEach((column, index) => {
  6.         if (index === 0) {
  7.             sums[index] = '总数'
  8.             return
  9.         }
  10.         console.log(column.property);
  11.         // 将所有元素的值转换成数字类型
  12.         const values = data.map((item) => Number(item[column.property]))
  13.         console.log(values.some((val) => Number.isNaN(val)));
  14.         // every 只要有一个是数字，就会返回true
  15.         // 判断数组中的数据是否是数字类型 some 只要存在一个是NaN那么就返回false
  16.         if (!values.some((value) => Number.isNaN(value))) {
  17.             sums[index] = ` ${values.reduce((prev, curr) => {
  18.                 const value = Number(curr)
  19.                 if (!Number.isNaN(value)) {
  20.                     return prev + curr
  21.                 } else {
  22.                     return prev
  23.  
  24.                 }
  25.             }, 0)}`
  26.         } else {
  27.             sums[index] = '/'
  28.         }
  29.     })
  30.  
  31.     return sums
  32. }

如果想要把合计行放到顶部去，可以使用css样式修改。

  1. /* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */
  2. ::v-deep .el-table__body-wrapper {
  3.     order: 1;
  4. }
  5. ::v-deep .el-table__fixed-body-wrapper {
  6.     top: 96px !important;
  7. }
  8. ::v-deep .el-table__fixed-footer-wrapper {
  9.     z-index: 0;
  10. }

5.所有功能汇总表格

template部分

  1. <template>
  2.   <div>
  3.     <el-popover placement="bottom-start" :width="600" trigger="hover">
  4.       <transition name="fade">
  5.           <div>
  6.               <div>选择需要显示的列</div>
  7.               <div>
  8.                   <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  9.                   <el-checkbox v-for="(item, index) in dropCol" :key="index" @change="handleCheckedBoxChange" v-model="item.status">{{item.label}}</el-checkbox>
  10.               </div>
  11.           </div>
  12.       </transition>
  13.       <template #reference>
  14.           <el-button icon="Setting">显示列</el-button>
  15.       </template>
  16.   </el-popover>
  17.  
  18.         <el-table  :data="roleList"  show-summary row-key="id"
  19.             :summary-method="getSummaries">
  20.             <template v-for="(col,index) in Col" :key="index" >
  21.                 <el-table-column  :width="index==0? flexColumnWidth(col.prop, roleList):'300'"
  22.                 :label="col.label" :prop="col.prop" align="center" />
  23.             </template>
  24.  
  25.         </el-table>
  26.   </div>
  27. </template>

script部分

  1. <script setup>
  2. import { ref, onMounted } from 'vue' // 引入ref和onMounted
  3. import Sortable from 'sortablejs'
  4. const roleList = ref([
  5.   {partName: 1,
  6.     batchNo:2,
  7.     invoiceNo: 3,
  8.     orderNo:4,
  9.     boxNo: 5,
  10.     caseNo: 6,}
  11. ]);
  12. const dropCol = ref([
  13.     {
  14.         label: '零件名称',
  15.         prop: 'partName',
  16.         status:true
  17.     },
  18.     {
  19.         label: '批次号',
  20.         prop: 'batchNo',
  21.         status:true
  22.     },
  23.     {
  24.         label: '发票号',
  25.         prop: 'invoiceNo',
  26.         status:true
  27.     },
  28.     {
  29.         label: '订单号',
  30.         prop: 'orderNo',
  31.         status:true
  32.     },
  33.     {
  34.         label: '箱号',
  35.         prop: 'boxNo',
  36.         status:true
  37.     },
  38.     {
  39.         label: '小箱号',
  40.         prop: 'caseNo',
  41.         status:true
  42.     }
  43. ])
  44. const Col = ref([
  45.     {
  46.         label: '零件名称',
  47.         prop: 'partName',
  48.         status:true
  49.     },
  50.     {
  51.         label: '批次号',
  52.         prop: 'batchNo',
  53.         status:true
  54.     },
  55.     {
  56.         label: '发票号',
  57.         prop: 'invoiceNo',
  58.         status:true
  59.     },
  60.     {
  61.         label: '订单号',
  62.         prop: 'orderNo',
  63.         status:true
  64.     },
  65.     {
  66.         label: '箱号',
  67.         prop: 'boxNo',
  68.         status:true
  69.     },
  70.     {
  71.         label: '小箱号',
  72.         prop: 'caseNo',
  73.         status:true
  74.     }
  75. ])
  76. let checkAll = ref(true)
  77. function handleCheckAllChange() {
  78.     dropCol.value.forEach(item => {
  79.       item.status = checkAll.value;
  80.     });
  81. }
  82. function handleCheckedBoxChange() {
  83.   const allTrue = dropCol.value.every(item => item.status === true);
  84.   Col.value=dropCol.value.filter(item=>item.status==true)
  85.   console.log(Col.value);
  86.   if (allTrue) {
  87.       checkAll.value = true
  88.   } else {
  89.       checkAll.value = false
  90.   }
  91.     
  92. }
  93.  
  94. //列拖拽
  95. function columnDrop() {
  96.     const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
  97.     console.log(wrapperTr);
  98.     Sortable.create(wrapperTr, {
  99.         animation: 180,
  100.         delay: 0,
  101.         onEnd: evt => {
  102.             // 过滤掉dropCol为false的项
  103.             const oldItem = Col.value[evt.oldIndex];
  104.             Col.value.splice(evt.oldIndex, 1);
  105.             Col.value.splice(evt.newIndex, 0, oldItem); 
  106.             console.log(evt.oldIndex,evt.newIndex);
  107.  
  108.         }
  109.     })
  110. }
  111.  
  112. // 自适应表格列宽
  113. const flexColumnWidth = (str, tableData, flag = 'max') => {
  114.     // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
  115.     // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
  116.     // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
  117.  
  118.     str = str + ''
  119.     let columnContent = ''
  120.     if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
  121.         return
  122.     }
  123.     if (!str || !str.length || str.length === 0 || str === undefined) {
  124.         return
  125.     }
  126.  
  127.     if (flag === 'equal') {
  128.         // 获取该列中第一个不为空的数据(内容)
  129.         for (let i = 0; i < tableData.length; i++) {
  130.             if (tableData[i][str].length > 0) {
  131.                 // console.log('该列数据[0]:', tableData[0][str])
  132.                 columnContent = tableData[i][str]
  133.                 break
  134.             }
  135.         }
  136.     } else {
  137.         // 获取该列中最长的数据(内容)
  138.         let index = 0
  139.         for (let i = 0; i < tableData.length; i++) {
  140.             // 数据为空跳出循环
  141.             // if (tableData[i][str] === null) {
  142.             //     return
  143.             // }
  144.             const now_temp = tableData[i][str] + ''
  145.             const max_temp = tableData[index][str] + ''
  146.             if (now_temp.length > max_temp.length) {
  147.                 index = i
  148.             }
  149.         }
  150.         columnContent = tableData[index][str]
  151.     }
  152.     // console.log('该列数据[i]:', columnContent)
  153.     // 以下分配的单位长度可根据实际需求进行调整
  154.     let flexWidth = 0
  155.     columnContent = columnContent + ''
  156.     for (const char of columnContent) {
  157.         if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
  158.             // 如果是英文字符，为字符分配8个单位宽度
  159.             flexWidth += 12
  160.         } else if (char >= '\u4e00' && char <= '\u9fa5') {
  161.             // 如果是中文字符，为字符分配15个单位宽度
  162.             flexWidth += 15
  163.         } else {
  164.             // 其他种类字符，为字符分配15个单位宽度
  165.             flexWidth += 12
  166.         }
  167.     }
  168.     if (flexWidth < 80) {
  169.         // 设置最小宽度
  170.         flexWidth = 80
  171.     }
  172.     // if (flexWidth > 250) {
  173.     //   // 设置最大宽度
  174.     //   flexWidth = 250
  175.     // }
  176.     return flexWidth + 'px'
  177. }
  178. // 自定义汇总方法
  179. const getSummaries = (param) => {
  180.     const { columns, data } = param
  181.     const sums = []
  182.     columns.forEach((column, index) => {
  183.         if (index === 0) {
  184.             sums[index] = '总数'
  185.             return
  186.         }
  187.         // console.log(column.property);
  188.         // 将所有元素的值转换成数字类型
  189.         const values = data.map((item) => Number(item[column.property]))
  190.         // console.log(values.some((val) => Number.isNaN(val)));
  191.         // every 只要有一个是数字，就会返回true
  192.         // 判断数组中的数据是否是数字类型 some 只要存在一个是NaN那么就返回false
  193.         if (!values.some((value) => Number.isNaN(value))) {
  194.             sums[index] = ` ${values.reduce((prev, curr) => {
  195.                 const value = Number(curr)
  196.                 if (!Number.isNaN(value)) {
  197.                     return prev + curr
  198.                 } else {
  199.                     return prev
  200.  
  201.                 }
  202.             }, 0)}`
  203.         } else {
  204.             sums[index] = '/'
  205.         }
  206.     })
  207.  
  208.     return sums
  209. }
  210.  
  211.  
  212. onMounted(() => {
  213.     columnDrop()
  214. })
  215. </script>

6.组件封装

封装的代码在这篇文章

封装elemetui自定义表格实现可拖拽列、显示隐藏列、数据汇总、自适应宽度组件-CSDN博客

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/420185
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号