Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解
更新時(shí)間：2021年09月14日 15:21:25 作者：付月半子
這篇文章主要介紹了Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
1. css: dragTable.css
@charset "UTF-8";
.w-table{
height: 100%;
width: 100%;
float: left;
}
/* 拖動(dòng)過程中，鼠標(biāo)顯示樣式 */
.w-table_moving .el-table th .thead-cell{
cursor: move !important;
}
.w-table_moving .el-table__fixed{
cursor: not-allowed;
}
.w-table .thead-cell{
display: inline-flex;
flex-direction: column;
align-items: center;
width: auto;
max-height: 23px;
vertical-align: middle;
overflow: initial;
position: relative;
}
2. 封裝組件： dragTable.vue
<template>
<div class="w-table" :class="{'w-table_moving': dragState.dragging}">
<el-table :data="data"
:ref="option.ref"
:class="option.class"
:stripe="option.stripe"
:border="option.border"
:height="option.height"
:max-height="option.maxHeight"
highlight-current-row
:style="{ width: parseInt(option.width)+'px' }" :cell-class-name="cellClassName"
:header-cell-class-name="headerCellClassName"
@sort-change="option.sortChange"
>
<slot name="fixed"></slot>
<template v-for="(col, index) in tableHeader">
<el-table-column :label="col.label" :key="index" :prop="col.prop" :width="col.width" v-if="col.useTemplate==true">
<template slot-scope="scope">
<span v-html=col.useTemplateRes(scope.row)></span>
</template>
</el-table-column>
<el-table-column v-else
:key="index"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="col.minWidth"
:type="col.type"
:sortable="col.sortable"
:header-align="col.headerAlign"
:align="col.align"
:column-key="index.toString()"
:render-header="renderHeader"
show-overflow-tooltip
:formatter="col.formatter"
>
</el-table-column>
<el-table-column :label="v.name" :key="k" :prop="v.prop" :width="v.width" v-else></el-table-column>
</template>
<!--<el-table-column v-for="(col, index) in tableHeader" :key="index"
:prop="col.prop"
:label="col.label"
:width="col.width"
:min-width="col.minWidth"
:type="col.type"
:sortable="col.sortable"
:header-align="col.headerAlign"
:align="col.align"
:column-key="index.toString()"
:render-header="renderHeader"
show-overflow-tooltip
:formatter="col.formatter"
>
</el-table-column>-->
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: "",
data () {
return {
tableHeader: this.header,
dragState: {
start: -9, // 起始元素的 index
end: -9, // 移動(dòng)鼠標(biāo)時(shí)所覆蓋的元素 index
dragging: false, // 是否正在拖動(dòng)
direction: undefined // 拖動(dòng)方向
}
}
},
props: {
data: {
default: function () {
return []
},
type: Array
},
header: {
default: function () {
return []
},
type: Array
},
option: {
default: function () {
return {}
},
type: Object
}
},
mounted() {
},
watch: {
header (val, oldVal) {
this.tableHeader = val
}
},
methods: {
renderHeader (createElement, {column}) {
return createElement(
'div', {
'class': ['thead-cell'],
on: {
mousedown: ($event) => { this.handleMouseDown($event, column) },
mousemove: ($event) => { this.handleMouseMove($event, column) }
}
}, [
// 添加 <a> 用于顯示表頭 label
createElement('span', column.label),
// 添加一個(gè)空標(biāo)簽用于顯示拖動(dòng)動(dòng)畫
createElement('span', {
'class': ['virtual']
})
])
},
// 按下鼠標(biāo)開始拖動(dòng)
handleMouseDown (e, column) {
this.dragState.dragging = true
this.dragState.start = parseInt(column.columnKey)
// 給拖動(dòng)時(shí)的虛擬容器添加寬高
let table = document.getElementsByClassName('w-table')[0]
let virtual = document.getElementsByClassName('virtual')
for (let item of virtual) {
item.style.height = table.clientHeight - 1 + 'px'
// item.style.width = item.parentElement.parentElement.clientWidth + 'px'
item.style.width = item.parentElement.clientWidth + 'px'
}
document.addEventListener('mouseup', this.handleMouseUp);
},
// 鼠標(biāo)放開結(jié)束拖動(dòng)
handleMouseUp () {
this.dragColumn(this.dragState)
// 初始化拖動(dòng)狀態(tài)
this.dragState = {
start: -9,
end: -9,
dragging: false,
direction: undefined
}
document.removeEventListener('mouseup', this.handleMouseUp);
},
// 拖動(dòng)中
handleMouseMove (e, column) {
if (this.dragState.dragging) {
let index = parseInt(column.columnKey) // 記錄起始列
if (index - this.dragState.start !== 0) {
this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // 判斷拖動(dòng)方向
this.dragState.end = parseInt(column.columnKey)
} else {
this.dragState.direction = undefined
}
} else {
return false
}
},
// 拖動(dòng)易位
dragColumn ({start, end, direction}) {
let tempData = []
let left = direction === 'left'
let min = left ? end : start - 1
let max = left ? start + 1 : end
for (let i = 0; i < this.tableHeader.length; i++) {
if (i === end) {
tempData.push(this.tableHeader[start])
} else if (i > min && i < max) {
tempData.push(this.tableHeader[ left ? i - 1 : i + 1 ])
} else {
tempData.push(this.tableHeader[i])
}
}
this.tableHeader = tempData
},
headerCellClassName ({column, columnIndex}) {
let active = columnIndex - 1 === this.dragState.end ? `darg_active_${this.dragState.direction}` : ''
let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ''
return `${active} ${start}`
},
cellClassName ({column, columnIndex}) {
return (columnIndex - 1 === this.dragState.start ? `darg_start` : '')
},
},
}
</script>
<style >
@import '~@/assets/css/dragTable.css';
</style>
3. 調(diào)用封裝組件
<template>
<div>
<wTable :data="WarnResTable_Data_SS" :header="tableHeaderSS" :option="tableOptionSS">
<el-table-column
type="index"
slot="fixed"
fixed
prop=""
label="序號(hào)"
align="center"
width="60"
>
</el-table-column>
<el-table-column
label="操作"
slot="fixed"
fixed
prop=""
width="95"
align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="lookDetails(scope.$index, scope.row)">查看
</el-button>
</template>
</el-table-column>
</wTable>
</div>
</template>
<script>
import wTable from '../../components/dragTable/dragTable'
export default {
name: 'Table',
data () {
return {
tableOptionSS: {
border: true,
stripe: true,
ref:'WarnResSSTable',
class:'pms-table',
maxHeight: "100%",
height: "100%",
sortChange:this.changeTableSortSS
},
tableHeaderSS: [
{
label: '地市名稱',
prop: 'dsmc',
sortable: true,
align:'center',
width:'200',
},
{
label: '運(yùn)維單位',
prop: 'ywdw',
align:'center',
width:'200',
},
{
label: '變電站',
prop: 'bdzmc',
align:'center',
width:'170',
},
{
label: '設(shè)備名稱',
prop: 'sbmc',
sortable: true,
align:'center',
width:'150',
},
{
label: '預(yù)警參數(shù)',
prop: 'yjcs',
align:'center',
width:'150',
},
{
label: '預(yù)警類型',
prop: 'yjlx',
align:'center',
width:'140',
},
{
label: '首次預(yù)警時(shí)間',
prop: 'scyjsj',
sortable:true,
align:'center',
width:'160',
formatter:this.formatTime
},
{
label: '更新數(shù)據(jù)時(shí)間',
prop: 'dqyjsj',
sortable:true,
align:'center',
width:'160',
formatter:this.formatTime
},
{
label: '預(yù)警描述',
prop: 'yjgz',
align:'center',
width:'170',
},
{
label: '設(shè)備類型',
prop: 'sblx',
sortable:true,
align:'center',
width:'140',
},
{
label: '電壓等級(jí)',
prop: 'dydjid',
sortable:true,
align:'center',
width:'120',
formatter:this.formatVoltageLevel
}
],
WarnResTable_Data_SS:[
{dsmc:'dsmc1',sbmc:'sbmc1',dydjid:'hhhhh1'},
{dsmc:'dsmc2',sbmc:'sbmc2',dydjid:'hhhhh2'},
{dsmc:'dsmc3',sbmc:'sbmc3',dydjid:'hhhhh3'}
],
}
},
methods: {
handleNameSort () {
console.log('handleNameSort')
},
formatVoltageLevel: function (row, column) {
let val = row[column.property];
if (val == undefined) {
return "";
}
console.log('val ')
return '5555'
},
changeTableSortSS(column){
console.log(' sortHandle column',column)
},
formatTime: function (row, column) {
let date = row[column.property];
if (date == undefined) {
return "";
}
return date?moment(new Date(date)).format('YYYY-MM-DD HH:MM:SS'):'';
},
formatVoltageLevel: function (row, column) {
let val = row[column.property];
if (val == undefined) {
return "";
}
return val+'kV'
},
},
components: {
wTable
}
}
</script>
到此這篇關(guān)于Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽案例詳解的文章就介紹到這了,更多相關(guān)Vue Element Sortablejs實(shí)現(xiàn)表格列的拖拽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue中props的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue.js body的css不生效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue如何跨組件傳遞Slot的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue-cli項(xiàng)目無法用本機(jī)IP訪問的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目無法用本機(jī)IP訪問的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue使用html2canvas實(shí)現(xiàn)截取圖片并保存
html2canvas是一個(gè)JavaScript庫(kù),它可以將HTML元素轉(zhuǎn)換為Canvas元素本文將介紹一下Vue如何使用html2canvas實(shí)現(xiàn)截取圖片并保存功能,需要的可以參考下2023-12-12
vue $set 給數(shù)據(jù)賦值的實(shí)例
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
emits是Vue3新增的選項(xiàng),emits主要作用在子組件中,用于接收在父組件中綁定的方法,這篇文章主要給大家介紹了關(guān)于vue3.x中emits的基本用法,需要的朋友可以參考下2022-07-07
這篇文章主要給大家深入的介紹了關(guān)于vue.js中v-if和v-show的相關(guān)資料，文中詳細(xì)介紹兩者的共同點(diǎn)和區(qū)別，通過圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06