表格行和列拖拽
vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽-CSDN博客
解决el-table表格拖拽后,只改变了数据,表头没变的问题-CSDN博客
npm install sortablejs --save
对于列拖拽:点击某列的表头前后挪移时,松开鼠标左键后,挪移的列就应该在哪列显示。
行拖拽:和列拖拽一样。
- <div>
- <el-table
- :data="tableData"
- border
- scrollbar-always-on
- ref="tableHeader"
- row-key="id"
- >
- <template v-for="item in setColumns" :key="item.label">
-
- <el-table-column
- v-if="item.prop === 'oprate'"
- fixed="right"
- :prop="item.prop"
- :label="item.label"
- >
- <template #header>
- <div class="search-title">
- <div :class="checked ? 'search-titleName' : ''">操作div>
- <el-icon class="search-icon" @click="search">
- <Search color="#409EFF" />
- el-icon>
- div>
- template>
- el-table-column>
-
- <el-table-column
- v-else-if="item.prop === 'index'"
- :type="item.type"
- :label="item.label"
- :width="item.width || 100"
- />
-
- <el-table-column
- v-else
- :prop="item.prop"
- :label="item.label"
- :width="item.width || 100"
- />
- template>
- el-table>
- div>
-
-
- .search-title{
- display: flex;
- /* justify-content: space-around; */
- }
- .search-titleName{
- color: #409EFF;
- }
- .search-icon{
- cursor: pointer;
- margin-top: 5px;
- margin-left: 10px;
- }