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

认证管理-上报库管理-查看-参数项查看页-列宽可拖拽

Browse Source
This commit is contained in:
刘彦泽
2023-02-07 16:55:45 +08:00
parent babe670441
commit 34a9d5ff73
2 changed files with 136 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/tableCollection/historyTable1.vue
+39
View File
@@ -0,0 +1,39 @@
<template>
<a-table
class="table"
:components="drag(columnshistory,'columnshistory')"
:columns="columnshistory"
:pagination="false"
:scroll="{x: '100%', 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: 'historyTable1',
props:['columnshistory','dataSourcehistory'],
mixins:[ResizeHeader, ResizeColumnProvide],
}
</script>
<style scoped>
</style>
jero-web/src/components/tableCollection/index1.vue
+97 -69
View File
@@ -1,6 +1,6 @@
<template> <template>
<div style="height: 100%"> <div style="height: 100%">
<div class="box"> <div class="box" v-if='isTrue'>
<!-- --> <!-- -->
<a-table <a-table
class="table" class="table"
@@ -11,7 +11,7 @@
:data-source="dataSource" :data-source="dataSource"
:loading="loading" :loading="loading"
sticky sticky
:components="components" :components="drag(columns,'columns',JSON.parse(JSON.stringify(minWidthColumns)))"
:columns="columns" :columns="columns"
:rowClassName="rowClassName" :rowClassName="rowClassName"
@change="tableOnChange" @change="tableOnChange"
@@ -168,28 +168,30 @@
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
> >
<a-table <history-table1 :columnshistory='columnshistory' :dataSourcehistory='dataSourcehistory'></history-table1>
class="table" <!-- :components="drag(columnshistory,'columnshistory')"-->
:columns="columnshistory" <!-- <a-table-->
:pagination="false" <!-- class="table"-->
:scroll="{y: 400}" <!-- :columns="columnshistory"-->
:data-source="dataSourcehistory" <!-- :pagination="false"-->
:loading="loading" <!-- :scroll="{x: '100%', y: 400}"-->
> <!-- :data-source="dataSourcehistory"-->
<span slot="content" slot-scope="text,record"> <!-- :loading="loading"-->
<a-tooltip placement="topLeft"> <!-- >-->
<template slot="title"> <!-- <span slot="content" slot-scope="text,record">-->
<span v-html="text"></span> <!-- <a-tooltip placement="topLeft">-->
</template> <!-- <template slot="title">-->
<span v-html="text"></span> <!-- <span v-html="text"></span>-->
</a-tooltip> <!-- </template>-->
</span> <!-- <span v-html="text"></span>-->
<span slot="detailText" slot-scope="text,record"> <!-- </a-tooltip>-->
<span class="text" :title="text"> <!-- </span>-->
{{text && text.length > 10?text.slice(0,9)+'...':text}} <!-- <span slot="detailText" slot-scope="text,record">-->
</span> <!-- <span class="text" :title="text">-->
</span> <!-- {{text && text.length > 10?text.slice(0,9)+'...':text}}-->
</a-table> <!-- </span>-->
<!-- </span>-->
<!-- </a-table>-->
<div class="page" v-if="dataSourcehistory.length > 0"> <div class="page" v-if="dataSourcehistory.length > 0">
<a-pagination <a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')" :show-total="total => $t('total')+` ${total} `+$t('strip')"
@@ -213,8 +215,10 @@
import { ACCESS_TOKEN } from '@/store/mutation-types' import { ACCESS_TOKEN } from '@/store/mutation-types'
import axios from 'axios' import axios from 'axios'
import Vue from 'vue' import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable' // import VueDraggableResizable from 'vue-draggable-resizable'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
import historyTable1 from './historyTable1.vue'
export default { export default {
name: 'index', name: 'index',
@@ -241,48 +245,52 @@
}, },
components: { components: {
CollectionType, CollectionType,
VueDraggableResizable // VueDraggableResizable
historyTable1
}, },
mixins:[ResizeHeader, ResizeColumnProvide],
data() { data() {
this.components = { // this.components = {
header: { // header: {
cell: (h, props, children) => { // cell: (h, props, children) => {
const { key, ...restProps } = props // const { key, ...restProps } = props
//
// 此处的this.columns 是定义的table的表头属性变量 // // 此处的this.columns 是定义的table的表头属性变量
//
const col = this.columns.find((col) => { // const col = this.columns.find((col) => {
const k = col.dataIndex || col.key // const k = col.dataIndex || col.key
return k === key // return k === key
}) // })
//
if (!col || !col.width) { // if (!col || !col.width) {
return h('th', { ...restProps }, [...children]) // return h('th', { ...restProps }, [...children])
} // }
//
const dragProps = { // const dragProps = {
key: col.dataIndex || col.key, // key: col.dataIndex || col.key,
class: 'table-draggable-handle', // class: 'table-draggable-handle',
attrs: { // attrs: {
w: 10, // w: 10,
x: col.width, // x: col.width,
z: 1, // z: 1,
axis: 'x', // axis: 'x',
draggable: false, // draggable: false,
resizable: false // resizable: false
}, // },
on: { // on: {
dragging: (x, y) => { // dragging: (x, y) => {
col.width = Math.max(x, 1) // col.width = Math.max(x, 1)
} // }
} // }
} // }
const drag = h('vue-draggable-resizable', { ...dragProps }) // const drag = h('vue-draggable-resizable', { ...dragProps })
return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]) // return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
} // }
} // }
} // }
return { return {
colIndexs:[],
minWidthColumns:[],
token: Vue.ls.get(ACCESS_TOKEN), token: Vue.ls.get(ACCESS_TOKEN),
jsonBody: [], jsonBody: [],
checkboxList: [], checkboxList: [],
@@ -297,6 +305,8 @@
pageNo: 1, pageNo: 1,
pageSize: 100, pageSize: 100,
pageNohistory: 1, pageNohistory: 1,
description:'',
isTrue:false,
pageSizehistory: 10, pageSizehistory: 10,
pageSizeOptions: ['100', '200'], pageSizeOptions: ['100', '200'],
total: 0, total: 0,
@@ -340,14 +350,15 @@
{ {
title: this.$t('OperationDetails'), title: this.$t('OperationDetails'),
dataIndex: 'logContent', dataIndex: 'logContent',
align: 'center', align: 'left',
ellipsis: true, ellipsis: true,
scopedSlots: { customRender: 'content' } scopedSlots: { customRender: 'content' },
width: 484
}, },
{ {
title: this.$t('remarks'), title: this.$t('remarks'),
dataIndex: 'remarks', dataIndex: 'remarks',
align: 'center', align: 'left',
ellipsis: true, ellipsis: true,
width: 180, width: 180,
scopedSlots: { customRender: 'detailText' } scopedSlots: { customRender: 'detailText' }
@@ -355,7 +366,7 @@
{ {
title: this.$t('OperationTime'), title: this.$t('OperationTime'),
dataIndex: 'createTime', dataIndex: 'createTime',
align: 'center', align: 'left',
ellipsis: true, ellipsis: true,
width: 180 width: 180
} }
@@ -629,8 +640,20 @@
} }
} }
} }
if(res.type){
this.colIndexs.push(index)
}
}) })
this.columns = [...this.columns]
this.isTrue = false
setTimeout(()=>{
this.isTrue = true
this.columns = [...this.columns]
this.colIndexs.forEach((item)=>{
this.minWidthColumns.push([this.columns[item],500])
})
},300)
console.log(this.columns) console.log(this.columns)
} }
}) })
@@ -852,6 +875,7 @@
} }
</style> </style>
<style scoped lang="less"> <style scoped lang="less">
@import'~@assets/less/common.less';
.inputWid { .inputWid {
min-width: 100px; min-width: 100px;
height: 38px; height: 38px;
@@ -962,6 +986,10 @@
text-justify: inter-ideograph; text-justify: inter-ideograph;
word-break: break-all word-break: break-all
} }
::v-deep .ant-table-placeholder{
margin-top: 8px !important;
}
</style> </style>
<style> <style>
.resize-table-th { .resize-table-th {