|
|
@@ -2,7 +2,9 @@
|
|
|
<div>
|
|
|
<!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
|
|
|
<el-table ref="table" :row-class-name="tableClassName" highlight-current-row :data="data" size="mini" :height="height ? height : data.length <= 5?'280px':'calc(100vh - 268px)'" @row-click="rowClick" :style="{width:'100%',minHeight:minHeight?minHeight:''}" :header-cell-style="{background:'#fafafafa',height:'40px',color:'#000000',fontSize:'12px'}"
|
|
|
- :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border @selection-change="selectionChange">
|
|
|
+ :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}" border @selection-change="selectionChange"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
width="35" fixed v-if="checkbox">
|
|
|
@@ -28,6 +30,7 @@
|
|
|
|
|
|
<script>
|
|
|
import {mapGetters} from "vuex"
|
|
|
+import Sortable from 'sortablejs'
|
|
|
export default {
|
|
|
/*
|
|
|
layout:表结构数据;
|
|
|
@@ -39,6 +42,10 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
list:[],
|
|
|
+ isCopy:true,
|
|
|
+ isRowSort:true,
|
|
|
+ highlightCurrentRow:[],
|
|
|
+ isShowTreeStyle:true
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -67,9 +74,26 @@ export default {
|
|
|
this.$refs.table.doLayout()
|
|
|
})
|
|
|
}
|
|
|
+ },
|
|
|
+ initSort() {
|
|
|
+ console.log('执行了换个位置')
|
|
|
+ if (!this.isRowSort) return
|
|
|
+ const el = this.$refs['table'].$el.querySelector('.el-table__body-wrapper > table > tbody')
|
|
|
+ new Sortable(el, {
|
|
|
+ animation: 150, // 动画
|
|
|
+ onEnd: evt => {
|
|
|
+ console.log(evt,'evt11')
|
|
|
+ const curRow = this.data.splice(evt.oldIndex, 1)[0]
|
|
|
+ console.log(curRow,'curRow22')
|
|
|
+ this.data.splice(evt.newIndex, 0, curRow)
|
|
|
+ console.log(this.data,'表格数据')
|
|
|
+ this.$emit('rowSort', this.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
+ this.initSort()
|
|
|
}
|
|
|
}
|
|
|
|
qymljy