el-table进行列的拖拽

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>