el-table + textarea输入 + sortablejs +删除+添加 实现拖拽排序 的研究

作品效果

                喜欢的下拉别忘记给作者点赞❤

前言

  工作中有这样的需求：用户要在表格中输入某步骤的方法且要求此表格可以满足步骤顺序的移动(也就是拖拽功能) 还要求能增加步骤的条数当然也会有删除，那么今天我将给大家用最简单的写法实现一个实用的小demo来实现这些需求！

一、sortablejs 是什么？

        Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

二、使用步骤

1.介绍

官方文档：GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. - GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.https://github.com/SortableJS/Sortable

2.安装

npm安装方式：

npm install sortablejs --save

其他安装方式见官方文档

3.使用

        1.第一步在组件内引入sortablejs

                import Sortable from "sortablejs";

        2.vue el-table 的html；

1.  
    
2.  
   <el-table :data="tableData" border fit class="tabledeg" row-key="id">
3.  
   <el-table-column label="拖拽排序" width="50" align="center">
4.  
   <div class="move">
5.  
   <i class="el-icon-rank" style="fonsize:20px;margin:18px"></i>
6.  
   </div>
7.  
   </el-table-column>
8.  
   <el-table-column label="编号" width="50" align="center" type="index">
9.  
   </el-table-column>
10.  
    <el-table-column label="步骤描述" width="170" align="center" prop="dectext" >
11.  
    <template slot-scope="scope">
12.  
    <el-input type="textarea"
13.  
    @change='aaaa(scope)'
14.  
    style="padding:0"
15.  
    :autosize="{ minRows: 2.7, maxRows: 40}"
16.  
    placeholder="未填写"
17.  
    v-model="tableData[scope.$index].dectext"
18.  
    ></el-input>
19.  
    </template>
20.  
    </el-table-column>
21.  
    <el-table-column label="预期结果" width="170" align="center" prop="resulttext">
22.  
    <template slot-scope="scope">
23.  
    <el-input type="textarea"
24.  
    @change='aaaa(scope)'
25.  
    style="padding:0"
26.  
    :autosize="{ minRows: 2.7, maxRows: 40}"
27.  
    placeholder="未填写"
28.  
    v-model="tableData[scope.$index].resulttext"
29.  
    ></el-input>
30.  
    </template>
31.  
    </el-table-column>
32.  
    <el-table-column label="操作" align="center" prop="caozuo">
33.  
    <template slot-scope="scope">
34.  
    <span class="colors" @click="del(scope.row.id)">
35.  
    <i class="el-icon-delete"></i>删除
36.  
    </span>
37.  
    </template>
38.  
    </el-table-column>
39.  
    </el-table>
40.  
    <i class="el-icon-circle-plus-outline" @click="additem"></i>

          3.vue css

1.  
   /deep/ .el-table .cell{
2.  
   padding: 0 ;
3.  
   }
4.  
   /deep/ .el-table .el-table__cell{
5.  
   padding: 0;
6.  
   }
7.  
    
8.  
   /deep/ .el-table--border .el-table__cell:first-child .cell {
9.  
   padding-left: 0;
10.  
    }
11.  
    /deep/ .el-textarea__inner{
12.  
    padding: 0 4px;
13.  
    }
14.  
    .move{
15.  
    cursor: pointer;
16.  
    }
17.  
    .colors{
18.  
    cursor: pointer;
19.  
    }
20.  
     
21.  
    /deep/.el-table, .el-table__expanded-cell {
22.  
    background-color: rgba(240, 10, 10,.2);
23.  
    }
24.  
     
25.  
    /deep/.el-table th, .el-table tr {
26.  
    background-color: rgba(64, 158, 255,.6);
27.  
    color: #F5F5F5;
28.  
    }
29.  
    /deep/.el-table__body tr:hover > td{
30.  
    background-color: rgba(64, 158, 255,.3) !important;
31.  
    color: rgb(255, 0, 0);
32.  
    font-size: 20px;
33.  
    }
34.  
    .oneformitem{
35.  
    position: relative;
36.  
    }
37.  
    .el-icon-circle-plus-outline{
38.  
    font-size:20px;
39.  
    color:rgb(64, 158, 255);
40.  
    position: absolute;
41.  
    left: -22px;
42.  
    bottom: 0;
43.  
    }

    4.vue javascript

1.  
   data() {
2.  
   return {
3.  
   tableData: [
4.  
   {
5.  
   id: '1',
6.  
   caozuo:'删除',
7.  
   dectext:'',
8.  
   resulttext:''
9.  
   },
10.  
    {
11.  
    id: '2',
12.  
    caozuo:'删除',
13.  
    dectext:'',
14.  
    resulttext:''
15.  
    },
16.  
    {
17.  
    id: '3',
18.  
    caozuo:'删除',
19.  
    dectext:'',
20.  
    resulttext:''
21.  
    },
22.  
    {
23.  
    id: '4',
24.  
    caozuo:'删除',
25.  
    dectext:'',
26.  
    resulttext:''
27.  
    }
28.  
    ],
29.  
    }
30.  
    }

1.  
   //生命周期 - 挂载完成（访问DOM元素）
2.  
   mounted() {
3.  
   this.rowDrop()
4.  
   },
5.  
   methods:{
6.  
   //行拖拽
7.  
   rowDrop() {
8.  
   const tbody = document.querySelector('.el-table__body-wrapper tbody')
9.  
   const _this = this
10.  
    Sortable.create(tbody, {
11.  
    animation: 500,
12.  
    direction: 'vertical',
13.  
    handle:".move",
14.  
    onEnd({ newIndex, oldIndex }) {
15.  
    // 三个参数 插入-向数组指定位置插入任意项元素 三个参数，第一个参数（起始位
16.  
    //置），第
17.  
    //二个参数（0），第三个参数（插入的项数）
18.  
    _this.tableData.splice(newIndex,0,_this.tableData.splice(oldIndex, 1)[0])
19.  
    // console.log(_this.tableData);
20.  
    //高手代码里看到.slice(0)，查了下这样写的好处：
21.  
    // 1.对原数组进行深拷贝，这样进行一系列操作的时候就不影响原数组了；
22.  
    // 2.将类数组对象转化为真正的数组对象
23.  
    //序号重置
24.  
    var newArray = _this.tableData.slice(0)
25.  
    _this.tableData = []
26.  
    _this.$nextTick(function () {
27.  
    _this.tableData = newArray
28.  
    })
29.  
    }
30.  
    })
31.  
    },
32.  
     
33.  
    //拖拽删除
34.  
    del(e){
35.  
    this.tableData.forEach((item,index)=>{
36.  
    if(item.dectext || item.resulttext){
37.  
    return this.$message({type:'warning',message:'仅能删除空步骤行！'});
38.  
    }
39.  
    if(item.id == e){
40.  
    this.tableData.splice(index,1);
41.  
    this.$message({type:'success',message:'删除成功！'});
42.  
    }
43.  
    //重新排序
44.  
    this.tableData.forEach((item,index)=>{
45.  
    item['id'] = index 1;
46.  
    });
47.  
    })
48.  
    },
49.  
    //添加table行
50.  
    additem(){
51.  
    this.tableData.push({
52.  
    id: this.tableData.length 1,
53.  
    caozuo:'删除',
54.  
    dectext:'',
55.  
    resulttext:''
56.  
    });
57.  
    this.$message({type:'success',message:'步骤添加成功！'});
58.  
    }
59.  
    }

总结:
          以上就是今天要讲的内容，本文仅仅简单介绍了sortablejs的使用而Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

结尾：有问题请及时评论或联系作者我们一起探讨 让技术延续！！

这篇好文章是转载于：学新通技术网