Shulou(Shulou.com)06/02 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.