Work effect
Don't forget to give the author a thumbs up if you like it❤
foreword
工作中有这样的需求：用户要在表格中输入某步骤的方法且要求此表格可以满足步骤顺序的移动(也就是拖拽功能) 还要求能增加步骤的条数当然也会有删除，那么今天我将给大家用最简单的写法实现一个实用的小demo来实现这些需求！
1. What is sortablejs ?
Sortable.js is an excellent js drag-and-drop library that supports ie9 and above versions of ie browsers and modern browsers, and can also run on mobile touch devices. Does not depend on jQuery. Supports Meteor, AngularJS, React, Vue, Knockout framework and any CSS library like Bootstrap, Element UI. You can use it to drag and drop div, table and other elements.
2. Use steps
1 Introduction
官方文档：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. Install
npm installation method:
npm install sortablejs --save
For other installation methods, see the official documentation
3. use
1. The first step is to introduce sortablejs in the component
import Sortable from "sortablejs";
2. vue el-table html；
<el-table :data="tableData" border fit class="tabledeg" row-key="id">
<el-table-column label="拖拽排序" width="50" align="center">
<div class="move">
<i class="el-icon-rank" style="fonsize:20px;margin:18px"></i>
</div>
</el-table-column>
<el-table-column label="编号" width="50" align="center" type="index">
</el-table-column>
<el-table-column label="步骤描述" width="170" align="center" prop="dectext" >
<template slot-scope="scope">
<el-input type="textarea"
@change='aaaa(scope)'
style="padding:0"
:autosize="{ minRows: 2.7, maxRows: 40}"
placeholder="未填写"
v-model="tableData[scope.$index].dectext"
></el-input>
</template>
</el-table-column>
<el-table-column label="预期结果" width="170" align="center" prop="resulttext">
<template slot-scope="scope">
<el-input type="textarea"
@change='aaaa(scope)'
style="padding:0"
:autosize="{ minRows: 2.7, maxRows: 40}"
placeholder="未填写"
v-model="tableData[scope.$index].resulttext"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center" prop="caozuo">
<template slot-scope="scope">
<span class="colors" @click="del(scope.row.id)">
<i class="el-icon-delete"></i>删除
</span>
</template>
</el-table-column>
</el-table>
<i class="el-icon-circle-plus-outline" @click="additem"></i>3.vue css
/deep/ .el-table .cell{
padding: 0 ;
}
/deep/ .el-table .el-table__cell{
padding: 0;
}
/deep/ .el-table--border .el-table__cell:first-child .cell {
padding-left: 0;
}
/deep/ .el-textarea__inner{
padding: 0 4px;
}
.move{
cursor: pointer;
}
.colors{
cursor: pointer;
}
/deep/.el-table, .el-table__expanded-cell {
background-color: rgba(240, 10, 10,.2);
}
/deep/.el-table th, .el-table tr {
background-color: rgba(64, 158, 255,.6);
color: #F5F5F5;
}
/deep/.el-table__body tr:hover > td{
background-color: rgba(64, 158, 255,.3) !important;
color: rgb(255, 0, 0);
font-size: 20px;
}
.oneformitem{
position: relative;
}
.el-icon-circle-plus-outline{
font-size:20px;
color:rgb(64, 158, 255);
position: absolute;
left: -22px;
bottom: 0;
}4.vue javascript
data() {
return {
tableData: [
{
id: '1',
caozuo:'删除',
dectext:'',
resulttext:''
},
{
id: '2',
caozuo:'删除',
dectext:'',
resulttext:''
},
{
id: '3',
caozuo:'删除',
dectext:'',
resulttext:''
},
{
id: '4',
caozuo:'删除',
dectext:'',
resulttext:''
}
],
}
} //生命周期 - 挂载完成（访问DOM元素）
mounted() {
this.rowDrop()
},
methods:{
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
animation: 500,
direction: 'vertical',
handle:".move",
onEnd({ newIndex, oldIndex }) {
// 三个参数 插入-向数组指定位置插入任意项元素 三个参数，第一个参数（起始位
//置），第
//二个参数（0），第三个参数（插入的项数）
_this.tableData.splice(newIndex,0,_this.tableData.splice(oldIndex, 1)[0])
// console.log(_this.tableData);
//高手代码里看到.slice(0)，查了下这样写的好处：
// 1.对原数组进行深拷贝，这样进行一系列操作的时候就不影响原数组了；
// 2.将类数组对象转化为真正的数组对象
//序号重置
var newArray = _this.tableData.slice(0)
_this.tableData = []
_this.$nextTick(function () {
_this.tableData = newArray
})
}
})
},
//拖拽删除
del(e){
this.tableData.forEach((item,index)=>{
if(item.dectext || item.resulttext){
return this.$message({type:'warning',message:'仅能删除空步骤行！'});
}
if(item.id == e){
this.tableData.splice(index,1);
this.$message({type:'success',message:'删除成功！'});
}
//重新排序
this.tableData.forEach((item,index)=>{
item['id'] = index+1;
});
})
},
//添加table行
additem(){
this.tableData.push({
id: this.tableData.length+1,
caozuo:'删除',
dectext:'',
resulttext:''
});
this.$message({type:'success',message:'步骤添加成功！'});
}
}Summary:
The above is what I want to talk about today. This article only briefly introduces the use of sortablejs and Sortable.js is an excellent js drag-and-drop library that supports ie9 and above versions of ie browsers and modern browsers, and can also run on mobile touch device. Does not depend on jQuery. Supports Meteor, AngularJS, React, Vue, Knockout framework and any CSS library like Bootstrap, Element UI. You can use it to drag and drop div, table and other elements.
End: If you have any questions, please comment in time or contact the author, let's discuss and let the technology continue! !