1、使用Sortable插件
下载：
npm install sortablejs --save
引入到当前使用的页面
import Sortable from 'sortablejs'
代码重点：可以参考以下代码（不是拿来就可以用的,需要摘取重要代码的内容）
row-key="id" 必须添加且唯一
el-table添加一个id
主要是initSort()方法
<template>
<div class="diff-container">
<div>
<el-table
v-loading ="loading"
:data="tableData"
height="calc(100vh - 180px)"
style="width: 100%"
ref="table"
row-key="branch"
id="sortExample"
>
<el-table-column
prop="order"
label="排序"
width="65"
>
<template>
<div class="drag">
<img src="@/assets/img/drag.png" alt="">
</div>
</template>
</el-table-column>
<el-table-column
prop="branch"
label="分支名"
width="180"
>
</el-table-column>
<el-table-column
prop="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-button
size="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-column
prop="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-switch
v-model="row.show"
active-text=""
@change="updateDiffShow(row)"
inactive-text=""
>
</el-switch>
</div>
</template>
</el-table-column>
<el-table-column
prop="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-dialog
title="添加可点击文件后缀"
: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-dialog
title="提示"
: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 = false
this.getDiffList()
},
// 获取分配列表
getDiffList(){
this.loading = true
this.$api.projectSetting.getDiff({
project_code: this.$store.state.project,
project_id: this.$store.state.version
}, res => {
this.loading = false
this.tableData = res.data
})
},
close() {
this.tipVisible = false
},
confirm(){
if(this.confirmMark === 'diff'){
// this.editList()
this.tipVisible = false
}else if(this.confirmMark === 'delete'){
this.tipVisible = false
let 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 = false
this.$message({
type: 'info',
message: '已取消删除'
});
},
deleteConfirm () {
this.deleteVisible = false
this.$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 = true
this.message = `确认删除分支 ${row.branch} 吗？`
this.confirmMark ='delete'
}
},
editRemark(row) {
this.$set(row,'edit',true)
},
addSuffix(){
this.suffixVisible = true
},
remarkSubmit(row) {
row.edit = false
this.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'
//editDiff
let 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>