1、使用Sortable插件
下载：
npm install sortablejs --save
引入到当前使用的页面
import Sortable from 'sortablejs'
代码重点：可以参考以下代码（不是拿来就可以用的,需要摘取重要代码的内容）
row-key="id" 必须添加且唯一
el-table添加一个id
主要是initSort()方法
<template><div class="diff-container"><div><el-tablev-loading ="loading":data="tableData"height="calc(100vh - 180px)"style="width: 100%"ref="table"row-key="branch"id="sortExample"><el-table-columnprop="order"label="排序"width="65"><template><div class="drag"><img src="@/assets/img/drag.png" alt=""></div></template></el-table-column><el-table-columnprop="branch"label="分支名"width="180"></el-table-column><el-table-columnprop="remark"label="备注信息"><template slot-scope="{row}"><div v-if="row.edit" class="flex-align-center"><el-input v-model="row.remark" placeholder="请输入内容"></el-input><el-button size="mini" style="margin-left:10px"@click="cancle(row)">取 消</el-button><el-buttonsize="mini"@click="remarkSubmit(row)">确 认</el-button></div><div v-else class="flex-align-center"><span>{{ row.remark ? row.remark : '--'}}</span><img style="margin-left:12px" class="cursor-pointer"src="@/assets/img/edit-icon.png" alt=""@click="editRemark(row)"></div></template></el-table-column><el-table-columnprop="show"label="显示分支"width="300"><template slot-scope="{row}"><!-- <div :class="[row.show ? 'show' : 'not-show','flex-align-center']"><div :class="[row.show ? 'show-title':'hidden']">{{ row.show ? '显示' : '隐藏' }}</div><div class="circle cursor-pointer"@click="updateDiffShow(row)"></div></div> --><div class="el-switch-demo defineSwitch"><el-switchv-model="row.show"active-text=""@change="updateDiffShow(row)"inactive-text=""></el-switch></div></template></el-table-column><el-table-columnprop="diffName"label="操作"width="250"><template slot-scope="{row}"><el-button class="button-hover"size="mini" icon="el-icon-delete"@click="deleteDiff(row)">删除</el-button></template></el-table-column></el-table></div><!-- 后缀名称添加的模态框 --><div><el-dialogtitle="添加可点击文件后缀":visible.sync="suffixVisible"width="600px":close-on-click-modal="false":before-close="handleClose"><div><el-form ref="form" :model="form" label-width="100px"><el-form-item label="生效分支："><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="文件后缀："><el-input v-model="form.name" placeholder="请输入，多个文件后缀用英文逗号分隔开 (例如: h,json,xlsx,xlsm,xls)"></el-input></el-form-item></el-form></div><span slot="footer" class="dialog-footer"><el-button size="mini"@click="suffixVisible = false">取 消</el-button><el-button size="mini"type="primary"@click="suffixVisible = false">确 定</el-button></span></el-dialog></div><!-- 删除提示框 --><div class="delete"><el-dialogtitle="提示":close-on-click-modal="false":visible.sync="deleteVisible"width="30%":before-close="closeDelete"><div slot="title"><div class="flex-align-center"><img src="@/assets/img/warning-red.png" alt=""><div style="margin-left:4px">提示</div></div></div><span>确认删除分支 {{ row.branch }} 吗？</span><span slot="footer" class="dialog-footer"><el-button @click="closeDelete" size="mini">取 消</el-button><el-button type="primary" @click="deleteConfirm"size="mini">确 定</el-button></span></el-dialog></div><div><delete-tip:deleteVisible="tipVisible"@close="close"@confirm="confirm":message="message"></delete-tip></div></div>
</template>
<script>import deleteTip from '@/components/common/deleteTip.vue';import Sortable from 'sortablejs'export default {components: {deleteTip,},data() {return {tipVisible:false,message:'',confirmMark:"",deleteVisible: false,suffixVisible: false,editTime:null,deleteRow: {},row: {},radio: 0,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},showRow:[{prop:'diffName',label:'分支名'},],loading: true,tableData: [],typeTimer: null}},watch: {},methods: {onTypeEnd(){let ids = []this.tableData.map(item => {ids.push(item.branch)})if (this.typeTimer) {window.clearTimeout(this.typeTimer);}this.typeTimer = setTimeout(() => {let params = {project_code: this.$store.state.project,branch: this.$store.state.brand,new_order_list: JSON.stringify(ids)}this.$api.projectSetting.updateBranchOrde(params, res => {})}, 2000);},initSort() {this.$nextTick(() => {const example1 = document.getElementById('sortExample').querySelector('.el-table__body-wrapper tbody');;const _this = this;Sortable.create(example1, {draggable: '.el-table__row', //指定样式类的元素才允许拖动animation: 100,//过渡动画时间//拖拽结束时事件onEnd: function (evt) {const { newIndex, oldIndex } = evt;//实时更换list中的数据const currRow = _this.tableData.splice(oldIndex, 1)[0];_this.tableData.splice(newIndex, 0, currRow);_this.onTypeEnd()},});})},cancle(row) {row.edit = falsethis.getDiffList()},// 获取分配列表getDiffList(){this.loading = truethis.$api.projectSetting.getDiff({project_code: this.$store.state.project,project_id: this.$store.state.version}, res => {this.loading = falsethis.tableData = res.data})},close() {this.tipVisible = false},confirm(){if(this.confirmMark === 'diff'){// this.editList()this.tipVisible = false}else if(this.confirmMark === 'delete'){this.tipVisible = falselet params = {branch: this.row.branch,project_code: this.$store.state.project,project_id: this.$store.state.version}this.$api.projectSetting.deleteDiff(params,res=>{this.$message.success('删除成功')this.getDiffList()})}},// 编辑功能editList(){let params = {id:'editid',branch:this.form.branch,mark: this.row.remark,showDiff: !this.row.show}this.$api.projectSetting.editDiff(params, res => {this.getDiffList()})},closeDelete() {this.deleteVisible = falsethis.$message({type: 'info',message: '已取消删除'}); },deleteConfirm () {this.deleteVisible = falsethis.$message({type: 'success',message: '删除成功!'});},handleClose() {this.suffixVisible = false},deleteDiff(row) {if(this.tableData.length === 1){this.$message.error('请至少保留一个分支，不可删除')} else {this.row = JSON.parse(JSON.stringify(row))this.tipVisible = truethis.message = `确认删除分支 ${row.branch} 吗？`this.confirmMark ='delete'}},editRemark(row) {this.$set(row,'edit',true)},addSuffix(){this.suffixVisible = true},remarkSubmit(row) {row.edit = falsethis.row = JSON.parse(JSON.stringify(row))// if(this.editTime){// window.clearTimeout(this.editTime)//}//this.editTime = setTimeout(() => {// this.editList()//},2000)let params = {project_code: this.$store.state.project,project_id: this.$store.state.version,branch:row.branch,update_col:'remark',update_data:row.remark,}this.$api.projectSetting.editDiff(params,res=>{this.getDiffList()this.$message.success("修改成功")})},updateDiffShow(row){// row.show = !row.show//this.tipVisible = true//this.message = '确定要修改显示分支?'//this.confirmMark ='diff'//editDifflet params = {project_code: this.$store.state.project,project_id: this.$store.state.version,branch:row.branch,update_col:'is_show',update_data: row.show ? 1 : 0,}this.$api.projectSetting.editDiff(params,res=>{this.getDiffList()this.$message.success("修改成功")}).then(res => {this.getDiffList()}).catch(res => {this.getDiffList()})}},mounted () {this.getDiffList()this.$nextTick(() => {this.initSort()})}};</script><style lang="less" scoped>.defineSwitch {/deep/.el-switch.is-checked .el-switch__core {border-color: #467FF2 !important;background-color: #467FF2 !important;}/deep/.el-switch__core {margin: 0;position: relative;width: 55px !important;height: 20px;border: 1px solid #D0D0D0 !important;outline: 0;border-radius: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;background: #D0D0D0 !important;-webkit-transition: border-color .3s,background-color .3s;transition: border-color .3s,background-color .3s;vertical-align: middle;}/deep/ .el-switch__core::before {content: "隐藏";position: absolute;top: -1px;right: 5px;color: #fff;}.is-checked /deep/ .el-switch__core::before {content: "显示 ";position: absolute;top: -1px;left: 5px;color: #fff;}}el-switch-demo{}::v-deep .el-table__body .el-table__row:nth-child(n) td {background-color: #fff !important;}.delete /deep/ .el-dialog__body {padding: 13px 20px;color: #606266;font-size: 14px;word-break: break-all;border-top: 1px solid transparent;
}/deep/ .el-message-box__title {padding-left: 0;margin-bottom: 0;font-size: 18px;line-height: 1;color: red;}.button-hover:hover{color:rgba(255, 99, 71, 1);background: #FFFFFF;border: 1px solid rgba(255, 99, 71, 1);}.show{background:rgba(70, 127, 242, 1);width: 50px;height: 20px;line-height: 50px;border-radius: 10px;}.not-show{background:rgba(208, 208, 208, 1);width: 50px;height: 20px;line-height: 50px;border-radius: 10px;}.show-title{color: #FFFFFF;font-size: 12px;padding: 0 2px 0 5px; }.hidden{color: #FFFFFF;font-size: 12px;padding: 0 2px 0 5px; }.circle{background: #FFFFFF;border-radius: 10px;width: 16px;height: 16px;}.diff-container{margin-top: 16px;}.suffix{background: rgba(70, 127, 242, 0.1);padding: 8px 8px;margin-right:10px;color: #467FF2;font-size: 14px;border-radius: 4px;}.el-icon-style{color: rgba(208, 208, 208, 1);font-size: 12px;&:hover{color:rgba(255, 99, 71, 1)}}.diff-button{/deep/ .el-button {border: 1px solid #467FF2;color: rgba(70, 127, 242, 1);&:hover{background: rgba(70, 127, 242, 0.1);}}}.warning-tip{font-size: 14px;/* 文字/次要文字#898989 */color: #898989;}</style>
