vue3实现列拖拽

小怪、

已于 2022-11-10 15:19:14 修改

阅读量591

点赞数 1

分类专栏： vue sortablejs 文章标签： vue.js

于 2022-10-14 10:51:52 首次发布

本文链接：https://blog.csdn.net/weixin_40721081/article/details/127315755

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

sortablejs

1 篇文章 0 订阅

订阅专栏

使用"sortablejs实现拖拽参考官网http://www.sortablejs.com/index.html
安装

npm install sortablejs --save

 <template>
 	<el-table :data="TableData" style="width: 100%" class="table-container">
          <el-table-column
            v-for="(item, index) in oldList"
            :key="`col_${index}`"
            :prop="newList[index].prop"
            :label="item.label"
          >
          </el-table-column>
	</el-table>
</template>
<script setup >
import Sortable from "sortablejs";
const TableData = ref([
  {
    name: "张三",
    phoneNumber: "11187111121",
    IdCard: "3219111111111164",
  },
]);
const dropCol= ref([
  { label: '人员姓名' , prop: 'name' },
  { label: '手机号' , prop: 'phoneNumber' },
  { label: '身份证号' , prop: 'IdCard' },
])
const oldList = ref(JSON.parse(JSON.stringify(dropCol.value))) 
const newList = ref(JSON.parse(JSON.stringify(dropCol.value)))
onMounted(() => {
	//列拖拽
	const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
       Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = dropCol.value[evt.oldIndex];
          dropCol.value.splice(evt.oldIndex, 1);
          dropCol.value.splice(evt.newIndex, 0, oldItem);
        },
      });
})
</script>