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>
相关推荐
Boilermaker199244 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构