WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

拖拽-可设置最小宽度

Browse Source
This commit is contained in:
zyn
2023-02-07 13:39:30 +08:00
parent f9d4148fc9
commit d1590420cb
3 changed files with 155 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/tableCollection/historyTable.vue
+39
View File
@@ -0,0 +1,39 @@
<template>
<a-table
:components="drag(columnshistory,'columns')"
class="table"
:columns="columnshistory"
:pagination="false"
:scroll="{y: 400}"
:data-source="dataSourcehistory"
:loading="loading"
>
<span slot="content" slot-scope="text,record">
<a-tooltip placement="topLeft">
<template slot="title">
<span v-html="text"></span>
</template>
<span v-html="text"></span>
</a-tooltip>
</span>
<span slot="detailText" slot-scope="text,record">
<span class="text" :title="text">
{{text && text.length > 10?text.slice(0,9)+'...':text}}
</span>
</span>
</a-table>
</template>
<script>
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
export default {
name: 'historyTable.vue',
props:['columnshistory','dataSourcehistory'],
mixins:[ResizeHeader, ResizeColumnProvide],
}
</script>
<style scoped>
</style>
jero-web/src/components/tableCollection/index.vue
+74 -67
View File
@@ -3,6 +3,7 @@
<div class="box">
<!-- -->
<a-table
:components="drag(columns,'columns',JSON.parse(JSON.stringify([[columns[3],500]])))"
class="table"
rowKey="id"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
@@ -179,28 +180,29 @@
@ok="handleOk"
@cancel="handleCancel"
>
<a-table
class="table"
:columns="columnshistory"
:pagination="false"
:scroll="{y: 400}"
:data-source="dataSourcehistory"
:loading="loading"
>
<span slot="content" slot-scope="text,record">
<a-tooltip placement="topLeft">
<template slot="title">
<span v-html="text"></span>
</template>
<span v-html="text"></span>
</a-tooltip>
</span>
<span slot="detailText" slot-scope="text,record">
<span class="text" :title="text">
{{text && text.length > 10?text.slice(0,9)+'...':text}}
</span>
</span>
</a-table>
<historyTable :columnshistory='columnshistory' :dataSourcehistory='dataSourcehistory'></historyTable>
<!-- <a-table-->
<!-- class="table"-->
<!-- :columns="columnshistory"-->
<!-- :pagination="false"-->
<!-- :scroll="{y: 400}"-->
<!-- :data-source="dataSourcehistory"-->
<!-- :loading="loading"-->
<!-- >-->
<!-- <span slot="content" slot-scope="text,record">-->
<!-- <a-tooltip placement="topLeft">-->
<!-- <template slot="title">-->
<!-- <span v-html="text"></span>-->
<!-- </template>-->
<!-- <span v-html="text"></span>-->
<!-- </a-tooltip>-->
<!-- </span>-->
<!-- <span slot="detailText" slot-scope="text,record">-->
<!-- <span class="text" :title="text">-->
<!-- {{text && text.length > 10?text.slice(0,9)+'...':text}}-->
<!-- </span>-->
<!-- </span>-->
<!-- </a-table>-->
<div class="page" v-if="dataSourcehistory.length > 0">
<a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')"
@@ -271,11 +273,14 @@
import { ACCESS_TOKEN } from '@/store/mutation-types'
import axios from 'axios'
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// import VueDraggableResizable from 'vue-draggable-resizable'
import { mapGetters } from 'vuex'
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
import historyTable from './historyTable.vue'
export default {
name: 'index',
mixins:[ResizeHeader, ResizeColumnProvide],
props: {
//接口
url: {
@@ -304,47 +309,48 @@
},
components: {
CollectionType,
VueDraggableResizable
// VueDraggableResizable
historyTable
},
data() {
this.components = {
header: {
cell: (h, props, children) => {
const { key, ...restProps } = props
// 此处的this.columns 是定义的table的表头属性变量
const col = this.columns.find((col) => {
const k = col.dataIndex || col.key
return k === key
})
if (!col || !col.width) {
return h('th', { ...restProps }, [...children])
}
const dragProps = {
key: col.dataIndex || col.key,
class: 'table-draggable-handle',
attrs: {
w: 10,
x: col.width,
z: 1,
axis: 'x',
draggable: false,
resizable: false
},
on: {
dragging: (x, y) => {
col.width = Math.max(x, 1)
}
}
}
const drag = h('vue-draggable-resizable', { ...dragProps })
return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
}
}
}
// this.components = {
// header: {
// cell: (h, props, children) => {
// const { key, ...restProps } = props
//
// // 此处的this.columns 是定义的table的表头属性变量
//
// const col = this.columns.find((col) => {
// const k = col.dataIndex || col.key
// return k === key
// })
//
// if (!col || !col.width) {
// return h('th', { ...restProps }, [...children])
// }
//
// const dragProps = {
// key: col.dataIndex || col.key,
// class: 'table-draggable-handle',
// attrs: {
// w: 10,
// x: col.width,
// z: 1,
// axis: 'x',
// draggable: false,
// resizable: false
// },
// on: {
// dragging: (x, y) => {
// col.width = Math.max(x, 1)
// }
// }
// }
// const drag = h('vue-draggable-resizable', { ...dragProps })
// return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
// }
// }
// }
return {
token: Vue.ls.get(ACCESS_TOKEN),
jsonBody: [],
@@ -411,14 +417,15 @@
{
title: this.$t('OperationDetails'),
dataIndex: 'logContent',
align: 'center',
align: 'left',
width: 320,
ellipsis: true,
scopedSlots: { customRender: 'content' }
},
{
title: this.$t('OperationTime'),
dataIndex: 'createTime',
align: 'center',
align: 'left',
ellipsis: true,
width: 180
}
@@ -767,10 +774,10 @@
let num = 0
this.content = []
jsonHead.forEach((res, index) => {
console.log(res)
// console.log(res)
// 配置列
if (res.type) {
console.log('配置')
// console.log('配置')
this.columns.push({
dataIndex: res.db_field_name,
align: 'left',
@@ -965,7 +972,7 @@
Object.keys(Obj).forEach((item) => {
if (Obj[item] instanceof Object && Obj[item].controlType !== undefined) {
Obj[item].list.forEach((itemLi) => {
console.log(item)
// console.log(item)
if((this.currentPersonRole == 'homo' || this.currentPersonRole == 'admin') && item == 'referencesCol'){
itemLi.isLock = 0
}else{
jero-web/src/mixins/header.js
+37 -6
View File
@@ -5,9 +5,10 @@ const events = {
move: 'mousemove',
stop: 'mouseup'
}
let tableAll = []
let tableAll = [] // 单个页面存放多个表格的columns
var columnsAll = []
var columnsKey = ''
let minColumn = [] // 存放设置最小宽的列及宽度
const DragHandler = {
name: 'nio-drag-handler',
//获取混入的方法（重新设置表头宽度）
@@ -86,9 +87,10 @@ const DragHandler = {
return h('div', { class: 'nio-drag-handler', on: { mousedown: this.handleMouseDown } }, [line])
}
}
const ResizeHeaderOne = function(val, name) {
const ResizeHeaderOne = function(val, name ,minWidths) {
columnsAll = val
columnsKey = name
minColumn = minWidths
if(tableAll.indexOf(val) === -1){
tableAll.push(val)
}
@@ -96,16 +98,44 @@ const ResizeHeaderOne = function(val, name) {
const { key, column, ...restProps } = props
let col = {}
// 处理多级表头
col = getRenderCoL(key, val)
// col = getRenderCoL(key, val)
col = getRenderCoL(key, columnsAll)
let content = [].concat(children)
console.log(col)
if (col) {
const handlerVNode = h(DragHandler, {
let handlerVNode;
if(minColumn && minColumn.length>0){
// 存放所有需要手动设置最小宽度的列的dataIndex
let colsdataIndex = []
minColumn.forEach((item)=>{
colsdataIndex.push(item[0].dataIndex)
handlerVNode = h(DragHandler, {
props: {
width: col.width,
minWidth: Math.min(item[1]),
column: JSON.parse(JSON.stringify(item[0]))
}
}, [])
})
// 不需要手动设置最小宽度的列
if(colsdataIndex.indexOf(col.dataIndex) === -1){
handlerVNode = h(DragHandler, {
props: {
width: col.width,
minWidth: Math.min(col.width, 100),
column: col
}
}, [])
}
}else{
handlerVNode = h(DragHandler, {
props: {
width: col.width,
minWidth: Math.min(col.width, 100),
column: col
}
}, [])
}
content = content.concat(
handlerVNode
)
@@ -119,10 +149,11 @@ const ResizeHeaderOne = function(val, name) {
}
export const ResizeHeader = {
methods: {
drag(columns, name) {
drag(columns, name ,minWidths) {
return {
header: {
cell: ResizeHeaderOne(columns, name)
// minWidths : 最小宽度 => [[需要设置的列,最小宽],[需要设置的列,最小宽],...]
cell: ResizeHeaderOne(columns, name,minWidths)
}
}
}