How to implement draggable column and column components based on el-table encapsulation

This article shows you how to implement drag-and-drop column and select column components based on el-table encapsulation. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Effect.

Need environment

Vue

ElementUI

Drag and drop plug-in Sortable.js

Properties need to be configured

Example

/ / you can put slot {{scope.column.label + scope.item.prop}} to edit and delete import HTable from "@ / components/HTable" here. Export default {components: {HTable}, data () {return {list: [], columns: [{label: "ID", / / describes the unique value of the prop: "_ id", / / column. You must have checked: true / / whether to show the column. / / some attributes of el-table-column can be written here}, {label: "category name", prop: "name", checked: true}, {label: "parent category" Prop: "parent.name", checked: true}, {label: "status", prop: "status", width: "100th", checked: true}, {label: "creation time", prop: "create_time", slotHeaderName: "create_time" / / Custom header checked: true}, {label: "Operation", prop: "action", fixed: "right", "min-width": "100th", slotName: "action", / / Custom cell slot checked: true Disabled: true}]} }}

Give me a like if it's useful! Attached component code

{{item.label}} import Sortable from "sortablejs"; export default {name: "HTable", props: {tableKey: String, columns: {type: Array, default () {return [] }, data: {type: Array, default () {return [];}}, setColumn: {type: Boolean, default: false}}, watch: {columns: {handler (newVal) {let localVal = this.getStorageCol (); let hotVal = [] If (localVal) {hotVal = this.dataDiff (newVal, localVal);} else {hotVal = [... newVal];} this.col = hotVal.map ((item, index) = > (item = {... item, index, checked: item.checked | | false})); this.checkedCol = this.checkedColFun (this.col) This.selectCol = this.checkedCol.map (item = > (item = item.prop));}, immediate: true}, data: {handler (newVal) {this.tableData = [... newVal];}, immediate: true}, col: {handler (newVal) {this.setStorageCol (newVal) }, deep: true, immediate: true}}, data () {return {tableData: [], col: [], checkedCol: [], selectCol: []}, mounted () {document.body.ondrop = function (event) {event.preventDefault (); event.stopPropagation ();} This.$nextTick (() = > {this.rowDrop (); this.columnDrop ();});}, methods: {drap () {this.$nextTick () = > {this.rowDrop (); this.columnDrop ();}) }, handleChangeSelectColumn () {this.col.forEach (item = > {if (this.selectCol.includes (item.prop)) {item.checked = true;} else {item.checked = false;}}); this.checkedCol = this.checkedColFun (this.col); this.drap () }, rowDrop () {const tbody = document.querySelector (".el-table__body-wrapper tbody"); Sortable.create (tbody, {onEnd: ({newIndex, oldIndex}) = > {[this.tableData [newIndex], this.tabledata [oldIndex]] = [this.tableData [oldIndex], this.tableData [newIndex]]; this.drap () This.$emit ("dropRow", {drapRow: this.tableData [oldIndex], targetRow: this.tableData [newIndex], drapRowIndex: oldIndex, targetRowIndex: newIndex, data: this.tableData});});}, columnDrop () {const wrapperTr = document.querySelector (".el-table__header-wrapper tr") Sortable.create (wrapperTr, {animation: 180, delay: 0, onEnd: ({newIndex, oldIndex}) = > {const oldItem = this.checkedCol [oldIndex]; const newItem = this.checkedCol [newIndex]; [this.col.newItem.index] .index, this.col.index [oldItem.index] = [oldItem.index, newItem.index] This.col.sort ((a, b) = > {return a.index-b.index;}); this.checkedCol = this.checkedColFun (this.col); this.tableData = this.tableData.slice (0, this.tableData.length); this.drap () This.$emit ("dropCol", {colItem: oldItem, newIndex: newIndex, oldIndex: oldIndex, column: this.checkedCol});}}, checkedColFun (arr) {return arr.filter (item = > item.checked) }, setStorageCol (data) {if (this.tableKey & & data & & data.length > 0) {localStorage.setItem ("HTable-" + this.tableKey, JSON.stringify (data));}, getStorageCol () {let datajson = localStorage.getItem ("HTable-" + this.tableKey); return datajson? JSON.parse (datajson): "";}, dataDiff (newVal, localVal) {let nl = newVal.length; let ll = localVal.length; if (nl! = ll) {return newVal;} else {let np = newVal.map (item = > item.prop). Sort (); let lp = localVal.map (item = > item.prop). Sort () If (np.join ()! = lp.join ()) {return newVal;} else {let nnl = []; for (let I = 0; I < localVal.length; iTunes +) {const item_l = localVal [I]; for (let j = 0; j < newVal.length; jacks +) {const item_n = newVal [j] If (item_l.prop = item_n.prop) {nnl.push ({... item_n, index: item_l.index});} return nnl;}; .HTable {position: relative .settingBox {width: 36px; height: 36px; border-radius: 2px; border: 1px solid # ebeef5; border-bottom: 0; margin-left: auto; position: relative; .icon {position: absolute; top: 0; left: 0; z-index: 1; width: 36px; height: 36px; text-align: center; font-size: 20px; line-height: 36px Color: # 909399; cursor: pointer;}}. SettingPopper {min-width: 100px! important;} the above content is how to implement draggable row and column components based on el-table encapsulation. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.