其他分享
首页 > 其他分享> > vue+element中的table实现拖曳效果

vue+element中的table实现拖曳效果

作者:互联网

vue+element中的table实现拖曳效果

用到的插件是 sortablejs
sortablejs GitHub地址
sortablejs 中文配置

HTML代码

<el-table 
 :data="ssjlList" 
 height="275"
 stripe 
 border
 row-key="id"
 :cell-class-name="tableWarning"
 style="width: 100%">
     <el-table-column
         show-overflow-tooltip
         prop="surgicalLevel"
         label="手术级别"
         width="80"
     >
         <template slot-scope="scope" >
             {{scope.row['surgicallevel']}}
         </template>
     </el-table-column>
     <el-table-column
         show-overflow-tooltip
         prop="narcosis"
         label="麻醉方式"
         width="80"
     ></el-table-column>
     <el-table-column
         show-overflow-tooltip
         prop="narcosisdoct"
         label="麻醉医师"
         width="80"
     ></el-table-column>
     <el-table-column fixed="right" width="100">
         <template slot="header">
             <span>操作 &nbsp;</span>
             <el-button
                 @click.native.prevent="handleInsertClick('ssj')"
                 type="text"
                 size="small"
             >新增</el-button>
         </template>
     </el-table-column>
</el-table>

JS代码

import Sortable from "sortablejs"
export default {
	mounted() {
		this.pagetable_drop()
	},
	methods: {
		// 拖动
        pagetable_drop() {
            this.$nextTick(() => {
                const tbody = document.querySelector('.table-box .el-table__body-wrapper tbody')
                const _this = this
                Sortable.create(tbody, {
                    onEnd({ newIndex, oldIndex }) {
                        const currRow = _this.ssjlList.splice(oldIndex, 1)[0]
                        _this.ssjlList.splice(newIndex, 0, currRow)
                        _this.$emit("table_data",_this.ssjlList)
                    }
                })
            })
        },
	}
}
小火车况且况且况且 发布了81 篇原创文章 · 获赞 3 · 访问量 3431 私信 关注

标签:vue,Sortable,element,ssjlList,sortablejs,table,newIndex,const
来源: https://blog.csdn.net/weixin_43972992/article/details/104021221