lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加表格拖动

Browse Source
This commit is contained in:
jmal 2020-03-02 18:03:22 +08:00
parent 7851002acf
commit 2c64253c90
2 changed files with 108 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -35,6 +35,7 @@
"vue-simple-uploader": "^0.7.4", "vue-simple-uploader": "^0.7.4",
"vue-touch": "^2.0.0-beta.4", "vue-touch": "^2.0.0-beta.4",
"vue-wechat-title": "^2.0.5", "vue-wechat-title": "^2.0.5",
"vuedraggable": "^2.23.2",
"vuex": "3.1.0", "vuex": "3.1.0",
"we-vue": "^2.3.3", "we-vue": "^2.3.3",
"webuploader": "^0.1.8", "webuploader": "^0.1.8",

202
src/views/home/index.vue
View File

@ -131,101 +131,101 @@
@cell-mouse-enter="cellMouseEnter" @cell-mouse-enter="cellMouseEnter"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-leave="cellMouseLeave"
> >
<template v-for="(item,index) in tableHead"> <template v-for="(item,index) in tableHead">
<el-table-column <el-table-column
v-if="index === 0" v-if="index === 0"
:key="index" :key="index"
:index="index" :index="index"
type="selection" type="selection"
min-width="50" min-width="50"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
v-if="index === 1" v-if="index === 1"
:key="index" :key="index"
:index="index" :index="index"
width="50" width="50"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<icon-file :item="scope.row" :image-url="imageUrl"></icon-file> <icon-file :item="scope.row" :image-url="imageUrl"></icon-file>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="index === 2" :key="index" :show-overflow-tooltip="true" min-width="200" :index="index" :prop="item.name" :label="item.label" :sortable="item.sortable" @click.stop="fileClick(scope.row)"> <el-table-column v-if="index === 2" :key="index" :show-overflow-tooltip="true" min-width="200" :index="index" :prop="item.name" :label="item.label" :sortable="item.sortable" @click.stop="fileClick(scope.row)">
<template slot-scope="scope"> <template slot-scope="scope">
<el-col v-if="scope.row.index === editingIndex" :span="10"> <el-col v-if="scope.row.index === editingIndex" :span="10">
<el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @keyup.enter.native="rowRename(renameFileName, scope.row)"> <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @keyup.enter.native="rowRename(renameFileName, scope.row)">
</el-input> </el-input>
<el-button <el-button
v-loading="renameLoading" v-loading="renameLoading"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="#f6f7fa88" element-loading-background="#f6f7fa88"
class="el-icon-check" class="el-icon-check"
@click="rowRename(renameFileName, scope.row)" @click="rowRename(renameFileName, scope.row)"
> >
</el-button> </el-button>
<el-button <el-button
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="#f6f7fa88" element-loading-background="#f6f7fa88"
class="el-icon-close" class="el-icon-close"
@click="editingIndex = -1" @click="editingIndex = -1"
> >
</el-button> </el-button>
</el-col> </el-col>
<span v-else>{{ scope.row.name }}</span> <span v-else>{{ scope.row.name }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="index === 3" :key="index" width="50" :index="index" align="center" header-align="center"> <el-table-column v-if="index === 3" :key="index" width="50" :index="index" align="center" header-align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" /> <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="index === 4" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center"> <el-table-column v-if="index === 4" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
<!-- 使用组件, 并传值到组件中 --> <!-- 使用组件, 并传值到组件中 -->
<template slot="header"> <template slot="header">
<svg-icon v-if="item.name !== ''" class="button-class" icon-class="more" @click="moreOperation($event)" /> <svg-icon v-if="item.name !== ''" class="button-class" icon-class="more" @click="moreOperation($event)" />
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="more" @click="moreClick(scope.row,$event)" /> <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="more" @click="moreClick(scope.row,$event)" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
v-if="index === 5" v-if="index === 5"
:key="index" :key="index"
width="90" width="90"
:prop="item.name" :prop="item.name"
:index="index" :index="index"
:label="item.label" :label="item.label"
:sortable="item.sortable" :sortable="item.sortable"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
align="center" align="center"
header-align="center" header-align="center"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{formatSize(scope.row.size)}}</span> <span>{{formatSize(scope.row.size)}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
v-if="index === 6" v-if="index === 6"
:key="index" :key="index"
width="150" width="150"
:prop="item.name" :prop="item.name"
:index="index" :index="index"
:label="item.label" :label="item.label"
:sortable="item.sortable" :sortable="item.sortable"
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
align="left" align="left"
header-align="left" header-align="left"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>&nbsp;&nbsp;&nbsp;{{formatTime(scope.row.agoTime)}}</span> <span>&nbsp;&nbsp;&nbsp;{{formatTime(scope.row.agoTime)}}</span>
</template>
</el-table-column>
</template> </template>
</el-table-column>
</template>
</el-table> </el-table>
<el-pagination <el-pagination
background background
@ -250,10 +250,11 @@ import Bus from '@/assets/js/bus'
import api from '@/api/upload-api' import api from '@/api/upload-api'
import BreadcrumbFilePath from "../../components/Breadcrumb/BreadcrumbFilePath"; import BreadcrumbFilePath from "../../components/Breadcrumb/BreadcrumbFilePath";
import IconFile from "../../components/Icon/IconFile"; import IconFile from "../../components/Icon/IconFile";
// import Sortable from 'sortablejs' import vuedraggable from 'vuedraggable';
import Sortable from 'sortablejs'
export default { export default {
components: {IconFile, BreadcrumbFilePath}, components: { IconFile, BreadcrumbFilePath, vuedraggable},
data() { data() {
return { return {
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=', imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
@ -400,16 +401,23 @@ export default {
} }
}, },
methods: { methods: {
draggableChange(){
console.log(678)
},
// 行拖拽 // 行拖拽
rowDrop() { rowDrop() {
// const tbody = document.querySelector('.el-table__body-wrapper tbody') const tbody = document.querySelector('.el-table__body-wrapper tbody')
// const _this = this const _this = this
// Sortable.create(tbody, { Sortable.create(tbody, {
swap: true,
chosenClass: 'sortable-highlight',
animation: 150,
sort: false
// onMoveCallback({ newIndex, oldIndex }) { // onMoveCallback({ newIndex, oldIndex }) {
// const currRow = _this.fileList.splice(oldIndex, 1)[0] // const currRow = _this.fileList.splice(oldIndex, 1)[0]
// _this.fileList.splice(newIndex, 0, currRow) // _this.fileList.splice(newIndex, 0, currRow)
// } // }
// }) })
}, },
// 格式化最近时间 // 格式化最近时间
formatTime(time) { formatTime(time) {
@ -1469,5 +1477,9 @@ export default {
overflow: auto; overflow: auto;
} }
/deep/ .sortable-highlight {
background-color: #66cc66;
}
</style> </style>