Vue<表格拖拉拽(编辑，删除)>

此文章是对之前表格拖拉拽的深入了解，增加了编辑和删除功能，感觉以后能用到，喜欢的可以小伙伴可以看下

效果图

tuozhuai2.gif

代码如下

(直接写好的demo，可以直接复制)

<template>
  <div class="overall">
    <!-- @sort-start 排序开始时被触发  发出： { event: MouseEvent, node: HTMLElement, index: number, collection: string }-->
    <!-- @sort-move 在排序过程中移动鼠标时触发 发出： { event } -->
    <!-- @sort-end 排序结束时触发 发出： { event, newIndex, oldIndex, collection } -->
    <!-- @input 排序后以新排序的列表结束后触发 发出： Array -->
    <SlickList
      :lockToContainerEdges="true"
      lockOffset="0%"
      axis="xy"
      lockAxis="xy"
      :distance="10"
      v-model="items"
      @input="getChangeLists"
      @sort-start="shouldCancelStart"
      id="box"
    >
      <SlickItem class="tab" v-for="(i,index) in items" :key="index" :index="index" >
        <el-button  type="text" class="close" @click="close(index)"></el-button>
        <el-button  type="text" class="edit" @click="edit(i)"></el-button>
        <div class="title">{{i.name}}</div>
      </SlickItem>
    </SlickList>
  </div>
</template>

<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
  components: {
    SlickList,
    SlickItem
  },
  data() {
    return {
      maskShow:false,
      inputShow:false,
      items: [
        {name:"1-1"},
        {name:"1-2"},
        {name:"1-3"},
        {name:"1-4"},
        {name:"1-5"},
        {name:"1-6"},
        {name:"1-7"},
        {name:"1-8"},
        {name:"1-9"},
        {name:"1-10"},
        {name:"1-11"},
        {name:"1-12"},
        {name:"1-13"},
        {name:"1-14"},
        {name:"1-15"}
      ]
    };
  },
  methods: {
    //  拖拽完成后返回被打乱后的顺序
    getChangeLists(vals) {
      console.log(vals);
      console.log(this.items);
    },
    //拖拽前执行的方法
    shouldCancelStart(e) {
      // let newItems = this.items.splice(e.index,1)
      // console.log( newItems)
    },
    //删除并关闭该tab
    close(e) {
     this.$confirm('请确定删除(删除后将无法恢复)！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let newItems = this.items.splice(e, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //编辑方法
    edit(e){
      this.$prompt('请输入修改内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder:'请输入1 - 10位的内容',
          inputPattern: /^[A-Za-z0-9]{1,10}$/,
          inputErrorMessage: '命名格式不正确'
        }).then(({ value }) => {
         e.name = value
          this.$message({
            type: 'success',
            message: '修改为: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    //确定方法，执行下一步
    confirm(){
      this.maskShow = false;
      this.inputShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/colour.scss";
#box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: 600px;
  max-height: 90vh;
  margin: 0 auto;
  background-color: #dfdbdb;
}
.tab {
  cursor: pointer;
  text-align: center;
  width: 200px;
  background-color: #fff;
  box-sizing: border-box;
  user-select: none; //不允许用户选中文字
  color: #333;
  font-weight: 400;
  position: relative;
  box-shadow: 1px 1px 2px #ccc;
  &:hover .edit{
   opacity: 1;
   transform: scale(1)
  }
  &:hover .close{
   opacity: 1;
   transform: scale(1)
  }
  .title {
    height: 50px;
    width: 100%;
    color: rgba(11, 145, 71, 0.658);
    font-weight: bold;
    line-height: 50px;
  }
  .edit,
  .close {
    transition: 0.5s;
    width: 10px;
    height: 10px;
    padding: 0 !important;
    position: absolute;
    top: 5px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px #ccc;
    opacity: 0;
    transform: scale(0);
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 0px #ccc;
    }
  }
  .edit {
    right: 25px;
    background: rgb(19, 230, 114);
  }
  .close {
    right: 10px;
    background: rgb(248, 121, 121);
  }
}

#mask {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
  }
  .hint-box {
      width: 300px;
      padding: 30px;
      box-sizing: border-box;
      background: white;
    font-size: 15px;
    .content {
      
    }
    .btn{
      margin-top: 80px;
      text-align: right;
      box-sizing: border-box;
      cursor: pointer;
      span{
           padding: 10px 15px;
          background: $base;
          color: white;
          
      }
    }
  }
}
</style>

希望各位用到的人点个赞！！哈哈哈~~