阅读网站模板,遥阳科技网站建设,公众号怎么制作横屏长图文,三合一网站搭建价格1、拖拽插件安装
npm i -S vuedraggable
// vuedraggable依赖Sortable.js#xff0c;我们可以直接引入Sortable使用Sortable的特性。
// vuedraggable是Sortable的一种加强#xff0c;实现组件化的思想#xff0c;可以结合Vue#xff0c;使用起来更方便。 2、引入拖拽函数…
1、拖拽插件安装
npm i -S vuedraggable
// vuedraggable依赖Sortable.js我们可以直接引入Sortable使用Sortable的特性。
// vuedraggable是Sortable的一种加强实现组件化的思想可以结合Vue使用起来更方便。 2、引入拖拽函数
import Sortable from sortablejs //1引入拖拽函数mounted() {this.rowDrop() //2组件创建时执行拖拽方法},// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(---rowDrop(拖拽初始化)---)const el document.querySelector(#table_count2 .el-table__body-wrapper tbody);const that this;new Sortable(el, {animation: 150,handle: .handle_drop, //class类名执行事件ghostClass: blue-background-class,// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, ----拖动到---, newIndex)const tempList [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 */console.log(---新数组---, tempList)that.tableData [...tempList]}// onEnd: (evt) {// console.log(----onEnd(拖拽结束)---, evt)// },});}, 3、el-table指定点拖拽完整代码 templatediv classcontentel-table :datatableData idtable_count2 classtable-box stripe border stylewidth: 100%; sizeminiselection-changehandleSelectionChange row-keyidel-table-column typeselection width50 :reserve-selectiontrue aligncenterfixedleft/el-table-columnel-table-column label序号 aligncenter width50 fixedtemplate slot-scopescope{{ scope.$index 1 }}/template/el-table-columnel-table-column propdate label日期 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter width210/el-table-columnel-table-column label操作 width150 aligncentertemplate slot-scopescopeel-tooltip content复制 placementtopel-button typesuccess plain circle sizeminiclick.stophandleCopy(scope.row, scope.$index)i classel-icon-box/i/el-button/el-tooltipel-tooltip content删除 placementtopel-button typedanger plain circle sizeminiclick.stophandleDelete(scope.row, scope.$index)i classel-icon-delete/i/el-button/el-tooltipel-tooltip classitem effectdark content长按拖动排序 placementtopel-button typeinfo plain circle sizeminii classel-icon-rank handle_drop stylefont-size: 14px;/i/el-button/el-tooltip/template/el-table-column/el-table/div
/templatescript
import Sortable from sortablejs //1引入拖拽函数
export default {name: TableBase3,components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: 2016-05-01,name: 王小虎1,address: 上海市普陀区金沙江路 1510 弄}, {id: 2,date: 2016-05-02,name: 王小虎2,address: 上海市普陀区金沙江路 1511 弄}, {id: 3,date: 2016-05-03,name: 王小虎3,address: 上海市普陀区金沙江路 1512 弄}, {id: 4,date: 2016-05-04,name: 王小虎4,address: 上海市普陀区金沙江路 1513 弄}]}},created() { },mounted() {this.rowDrop() //2组件创建时执行拖拽方法},methods: {// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(---rowDrop(拖拽初始化)---)const el document.querySelector(#table_count2 .el-table__body-wrapper tbody);const that this;new Sortable(el, {animation: 150,handle: .handle_drop, //class类名执行事件ghostClass: blue-background-class,// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, ----拖动到---, newIndex)const tempList [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 */console.log(---新数组---, tempList)that.tableData [...tempList]}// onEnd: (evt) {// console.log(----onEnd(拖拽结束)---, evt)// },});},//多选handleSelectionChange(val) {console.log(----多选 multipleSelection---, val)this.multipleSelection val;},//复制handleCopy(row, rowIndex) {let newList [...this.tableData]let newRow { ...row }newRow[id] newList.length 1newRow[name] newRow[name] - newList.length 1newList.push(newRow)this.tableData [...newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm(是否确认删除此项, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {this.tableData.splice(rowIndex, 1)}).catch(() { });}},
};
/scriptstyle langscss scoped
::v-deep {/**el-table表格调整 start*/.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table--mini .el-table__cell {padding: 2px;flex: 1;}/**el-table表格调整 end */
}
/style 4、el-table整行拖拽完整代码 templatediv classcontentel-table :datatableData idtable_count classtable-box stripe border stylewidth: 100%; sizeminiselection-changehandleSelectionChange row-keyidel-table-column typeselection width50 :reserve-selectiontrue aligncenterfixedleft/el-table-columnel-table-column label序号 aligncenter width50 fixedtemplate slot-scopescope{{ scope.$index 1 }}/template/el-table-columnel-table-column propdate label日期 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter width210/el-table-columnel-table-column label操作 width100 aligncenter fixedrighttemplate slot-scopescopeel-tooltip content复制 placementtopel-button typesuccess plain circle sizeminiclick.stophandleCopy(scope.row, scope.$index)i classel-icon-box/i/el-button/el-tooltipel-tooltip content删除 placementtopel-button typedanger plain circle sizeminiclick.stophandleDelete(scope.row, scope.$index)i classel-icon-delete/i/el-button/el-tooltip/template/el-table-column/el-table/div
/templatescript
import Sortable from sortablejs //1引入拖拽函数
export default {name: TableBase2,components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: 2016-05-01,name: 王小虎1,address: 上海市普陀区金沙江路 1510 弄}, {id: 2,date: 2016-05-02,name: 王小虎2,address: 上海市普陀区金沙江路 1511 弄}, {id: 3,date: 2016-05-03,name: 王小虎3,address: 上海市普陀区金沙江路 1512 弄}, {id: 4,date: 2016-05-04,name: 王小虎4,address: 上海市普陀区金沙江路 1513 弄}]}},created() { },mounted() {this.rowDrop() //2组件创建时执行拖拽方法},methods: {// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(---rowDrop(拖拽初始化)---)const el document.querySelector(#table_count .el-table__body-wrapper tbody);const that this;Sortable.create(el, {// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, ----拖动到---, newIndex)const tempList [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 */console.log(---新数组---, tempList)that.tableData [...tempList]}// onEnd: (evt) {// console.log(----onEnd(拖拽结束)---, evt)// },})},//多选handleSelectionChange(val) {console.log(----多选 multipleSelection---, val)this.multipleSelection val;},//复制handleCopy(row, rowIndex) {let newList [...this.tableData]let newRow { ...row }newRow[id] newList.length 1newRow[name] newRow[name] - newList.length 1newList.push(newRow)this.tableData [...newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm(是否确认删除此项, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {this.tableData.splice(rowIndex, 1)}).catch(() { });}},
};
/scriptstyle langscss scoped
::v-deep {/**el-table表格调整 start*/.el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table--mini .el-table__cell {padding: 2px;flex: 1;}/**el-table表格调整 end */
}
/style
5、自定义ul li 行拖拽(完整代码--复制即用) templatediv classcontentul idtable_count2!-- 注意 key必须是唯一的id, 如果用index就可能导致渲染错误问题 --li classtable_li v-for(item,index) in tableData :keytli_item.id span{{ item.name }}/spani classel-icon-rank handle_drop stylefont-size: 14px;/i/li/ul/div
/templatescript
import Sortable from sortablejs //1引入拖拽函数
export default {name: TableBase3,components: {},data() {return {tableData: [{id: 1,date: 2016-05-01,name: 王小虎1,address: 上海市普陀区金沙江路 1510 弄}, {id: 2,date: 2016-05-02,name: 王小虎2,address: 上海市普陀区金沙江路 1511 弄}, {id: 3,date: 2016-05-03,name: 王小虎3,address: 上海市普陀区金沙江路 1512 弄}, {id: 4,date: 2016-05-04,name: 王小虎4,address: 上海市普陀区金沙江路 1513 弄}]}},created() { },mounted() {this.rowDrop() //2组件创建时执行拖拽方法},methods: {// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(---rowDrop(拖拽初始化)---)const el document.querySelector(#table_count2);const that this;new Sortable(el, {animation: 150,handle: .handle_drop, //class类名执行事件ghostClass: blue-background-class,// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, ----拖动到---, newIndex)const tempList [...that.tableData]/**splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 */console.log(---新数组---, tempList)that.tableData [...tempList]}// onEnd: (evt) {// console.log(----onEnd(拖拽结束)---, evt)// },});},},
};
/scriptstyle langscss scoped.table_li{width: 500px;padding: 10px;border: 1px solid orange;border-radius: 5px;margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between;
}
/style
相关文档Element UI table表格行拖动排序_element表格拖拽改变顺序-CSDN博客
