devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽

作者：小丑西瓜9 | 2024-06-16 18:38:53

赞

踩

vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽
如需有对el-table表格进行拖拽的需求，请点击：
eleplus对el-table表格进行拖拽(使用sortablejs进行列拖拽和行拖拽)：-CSDN博客
 如果你已实现拖拽需求，但拖拽后发现表头并未改变的话，请点击：

解决el-table表格拖拽后，只改变了数据，表头没变的问题-CSDN博客

先看看是不是你想要的。

限制拖拽

Sortable.js中文网

sortableJs有个配置项是filter，过滤掉不可进行拖拽的列或行。

本文采用vue3+ele-plus的table组件结合sortableJs插件对表格拖拽需求进行开发：

列拖拽：

使用:header-cell-class-name="headerCellClassName"对el-table的列增加headerClassFilter类名，有此类名的行不可进行拖拽(在Sortable.create实例中对headerClassFilter类名进行过滤，即filter绑定的类名)。

  1. <template>
  2.     <div>
  3.         <el-table
  4.             :data="tableData"
  5.             border
  6.             scrollbar-always-on
  7.             ref="tableHeader"
  8.             row-key="id"
  9.             :header-cell-class-name="headerCellClassName"
  10.         >
  11.             <template v-for="item in setColumns" :key="item.label">
  12.                 <!-- 操作列 -->
  13.                 <el-table-column
  14.                     v-if="item.prop === 'oprate'"
  15.                     fixed="right"
  16.                     :prop="item.prop"
  17.                     :label="item.label"
  18.                 >
  19.                     <template #header>
  20.                         <div class="search-title">
  21.                             <div :class="checked ? 'search-titleName' : ''">操作</div>
  22.                             <el-icon class="search-icon" @click="search">
  23.                                 <Search color="#409EFF" />
  24.                             </el-icon>
  25.                         </div>
  26.                     </template>
  27.                 </el-table-column>
  28.                 <!-- 序号列 -->
  29.                 <el-table-column
  30.                     v-else-if="item.prop === 'index'"
  31.                     :type="item.type"
  32.                     :label="item.label"
  33.                     :width="item.width || 100"
  34.                 />
  35.                 <!-- 数据列 -->
  36.                 <el-table-column
  37.                     v-else
  38.                     :prop="item.prop"
  39.                     :label="item.label"
  40.                     :width="item.width || 100"
  41.                 />
  42.             </template>
  43.         </el-table>
  44.     </div>
  45. </template>
  46.  
  47. <script setup lang='js'>
  48.     import { ref, onMounted } from 'vue'
  49.     import Sortable from 'sortablejs';
  50.     let setColumns = ref([
  51.   {
  52.     prop: 'index',
  53.     label: '序号',
  54.     type: 'index'
  55.   },
  56.   {
  57.     prop: 'name',
  58.     label: '姓名'
  59.   },
  60.   {
  61.     prop: 'address',
  62.     label: '地址'
  63.   },
  64.   {
  65.     prop: '11',
  66.     label: '1'
  67.   },
  68.   {
  69.     prop: '22',
  70.     label: '2'
  71.   },
  72.   {
  73.     prop: '33',
  74.     label: '3'
  75.   },
  76.   {
  77.     prop: '44',
  78.     label: '4'
  79.   },
  80.   {
  81.     prop: '55',
  82.     label: '5'
  83.   },
  84.   {
  85.     prop: '66',
  86.     label: '6'
  87.   },
  88.   {
  89.     prop: 'oprate',
  90.     lable: ''
  91.   }
  92. ])
  93.     let tableData = ref([
  94.   {
  95.     name: 'Tom1',
  96.     address: '上海',
  97.     11: 11,
  98.     22: 21,
  99.     33: 31,
  100.     44: 41,
  101.     55: 51,
  102.     66: 61,
  103.     id: 1
  104.   },
  105.   {
  106.     name: 'Tom2',
  107.     address: '北京',
  108.     11: 12,
  109.     22: 22,
  110.     33: 32,
  111.     44: 42,
  112.     55: 52,
  113.     66: 62,
  114.     id: 2
  115.   },
  116.   {
  117.     name: 'Tom3',
  118.     address: '广州',
  119.     11: 13,
  120.     22: 23,
  121.     33: 33,
  122.     44: 43,
  123.     55: 53,
  124.     66: 63,
  125.     id: 3
  126.   },
  127.   {
  128.     name: 'Tom4',
  129.     address: '深圳',
  130.     11: 14,
  131.     22: 24,
  132.     33: 34,
  133.     44: 44,
  134.     55: 54,
  135.     66: 64,
  136.     id: 4
  137.   }
  138. ])
  139.     let sortable;
  140.     const tableHeader = ref(null);
  141.  
  142.     onMounted(() => {
  143.         columnDrag(); // 初始化列拖拽事件
  144.     })
  145.     const headerCellClassName = ({column}) => { // 给序号和操作列增加类名,意在这两列不可进行拖拽
  146.         if (column.label === '序号' || column.property === 'oprate') {
  147.             return 'headerClassFilter'
  148.         }
  149.     }
  150.  
  151.     const columnDrag = () => {
  152.         let el = tableHeader.value.$el.querySelector('.el-table__header-wrapper tr')
  153.         Sortable.create(el, {
  154.             animation: 180,
  155.             delay: 0,
  156.             filter: '.headerClassFilter', // 类名为headerClassFilter的列不可进行拖拽
  157.             onMove({ related }) { // 移动单元格时，如果related.className包含headerClassFilter，即不可拖拽
  158.                 return related.className.indexOf('headerClassFilter') === -1;
  159.             },
  160.             onEnd(evt) {
  161.                 const oldItem = setColumns.value[evt.oldIndex]
  162.                 setColumns.value.splice(evt.oldIndex, 1);
  163.                 setColumns.value.splice(evt.newIndex, 0, oldItem);
  164.             }
  165.         })
  166.     }
  167.  
  168. </script>
  169.  
  170. <style scoped>
  171.     .search-title{
  172.         display: flex;
  173.         /* justify-content: space-around; */
  174.     }
  175.     .search-titleName{
  176.         color: #409EFF;
  177.     }
  178.     .search-icon{
  179.         cursor: pointer;
  180.         margin-top: 5px;
  181.         margin-left: 10px;
  182.     }
  183.     :deep(.headerClassFilter){
  184.         background-color: red !important;
  185.         cursor: not-allowed;
  186.     }
  187.     :deep(.el-table .rowClassFilter){
  188.         background-color: #ffeebc !important;
  189.         cursor: not-allowed;
  190.     }
  191. </style>

行拖拽：

使用:row-class-name="rowClassName"对el-table的行增加rowClassFilter类名，有此类名的行不可进行拖拽(在Sortable.create实例中对rowClassFilter类名进行过滤，即filter绑定的类名)。

  1. <template>
  2.     <div>
  3.         <el-table
  4.             :data="tableData"
  5.             border
  6.             scrollbar-always-on
  7.             ref="tableHeader"
  8.             row-key="id"
  9.             :row-class-name="rowClassName"
  10.         >
  11.             <template v-for="item in setColumns" :key="item.label">
  12.                 <!-- 操作列 -->
  13.                 <el-table-column
  14.                     v-if="item.prop === 'oprate'"
  15.                     fixed="right"
  16.                     :prop="item.prop"
  17.                     :label="item.label"
  18.                 >
  19.                     <template #header>
  20.                         <div class="search-title">
  21.                             <div :class="checked ? 'search-titleName' : ''">操作</div>
  22.                             <el-icon class="search-icon" @click="search">
  23.                                 <Search color="#409EFF" />
  24.                             </el-icon>
  25.                         </div>
  26.                     </template>
  27.                 </el-table-column>
  28.                 <!-- 序号列 -->
  29.                 <el-table-column
  30.                     v-else-if="item.prop === 'index'"
  31.                     :type="item.type"
  32.                     :label="item.label"
  33.                     :width="item.width || 100"
  34.                 />
  35.                 <!-- 数据列 -->
  36.                 <el-table-column
  37.                     v-else
  38.                     :prop="item.prop"
  39.                     :label="item.label"
  40.                     :width="item.width || 100"
  41.                 />
  42.             </template>
  43.         </el-table>
  44.     </div>
  45. </template>
  46.  
  47. <script setup lang='js'>
  48.     import { ref, watch, onMounted } from 'vue'
  49.     import Sortable from 'sortablejs';
  50.  
  51.     let setColumns = ref([
  52.   {
  53.     prop: 'index',
  54.     label: '序号',
  55.     type: 'index'
  56.   },
  57.   {
  58.     prop: 'name',
  59.     label: '姓名'
  60.   },
  61.   {
  62.     prop: 'address',
  63.     label: '地址'
  64.   },
  65.   {
  66.     prop: '11',
  67.     label: '1'
  68.   },
  69.   {
  70.     prop: '22',
  71.     label: '2'
  72.   },
  73.   {
  74.     prop: '33',
  75.     label: '3'
  76.   },
  77.   {
  78.     prop: '44',
  79.     label: '4'
  80.   },
  81.   {
  82.     prop: '55',
  83.     label: '5'
  84.   },
  85.   {
  86.     prop: '66',
  87.     label: '6'
  88.   },
  89.   {
  90.     prop: 'oprate',
  91.     lable: ''
  92.   }
  93. ])
  94.     let tableData = ref([
  95.   {
  96.     name: 'Tom1',
  97.     address: '上海',
  98.     11: 11,
  99.     22: 21,
  100.     33: 31,
  101.     44: 41,
  102.     55: 51,
  103.     66: 61,
  104.     id: 1
  105.   },
  106.   {
  107.     name: 'Tom2',
  108.     address: '北京',
  109.     11: 12,
  110.     22: 22,
  111.     33: 32,
  112.     44: 42,
  113.     55: 52,
  114.     66: 62,
  115.     id: 2
  116.   },
  117.   {
  118.     name: 'Tom3',
  119.     address: '广州',
  120.     11: 13,
  121.     22: 23,
  122.     33: 33,
  123.     44: 43,
  124.     55: 53,
  125.     66: 63,
  126.     id: 3
  127.   },
  128.   {
  129.     name: 'Tom4',
  130.     address: '深圳',
  131.     11: 14,
  132.     22: 24,
  133.     33: 34,
  134.     44: 44,
  135.     55: 54,
  136.     66: 64,
  137.     id: 4
  138.   }
  139. ])
  140.     let sortable;
  141.     const tableHeader = ref(null);
  142.     
  143.  
  144.     onMounted(() => {
  145.         rowDrag() // 初始化行拖拽事件
  146.     })
  147.  
  148.     const rowClassName = (data) => {
  149.         if (data.rowIndex === 0 || data.rowIndex === tableData.value.length - 1) {
  150.             return 'rowClassFilter'
  151.         }
  152.     }
  153.  
  154.     const rowDrag = () => {
  155.         let el = tableHeader.value.$el.querySelector('.el-table__body-wrapper tbody')
  156.         Sortable.create(el, {
  157.             animation: 180,
  158.             delay: 0,
  159.             filter: '.rowClassFilter', // 类名为rowClassFilter的行不可进行拖拽
  160.             onMove({related}) {
  161.                 return related.className.indexOf('rowClassFilter') === -1;
  162.             },
  163.             onEnd(evt) {
  164.                 const oldItem = tableData.value[evt.oldIndex]
  165.                 tableData.value.splice(evt.oldIndex, 1);
  166.                 tableData.value.splice(evt.newIndex, 0, oldItem);
  167.             }
  168.         })
  169.     }
  170. </script>
  171.  
  172. <style scoped>
  173.     .search-title{
  174.         display: flex;
  175.         /* justify-content: space-around; */
  176.     }
  177.     .search-titleName{
  178.         color: #409EFF;
  179.     }
  180.     .search-icon{
  181.         cursor: pointer;
  182.         margin-top: 5px;
  183.         margin-left: 10px;
  184.     }
  185.     :deep(.headerClassFilter){
  186.         background-color: red !important;
  187.         cursor: not-allowed;
  188.     }
  189.     :deep(.el-table .rowClassFilter){
  190.         background-color: #ffeebc !important;
  191.         cursor: not-allowed;
  192.     }
  193. </style>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号