Skip to content

seeta-device / deviceManage

Go to a project
Commit a5163c49 by 温丽香
Options

各页面的表格滚动条修改

1 parent 2a92a55f
Pipeline #3383 passed
in 59 seconds
Inline Side-by-side
Showing with 182 additions and 46 deletions
src/components/seeta-ui/seeta-table/index.vue
...@@ -143,7 +143,7 @@ export default class seetaTableIndex extends Vue { ...@@ -143,7 +143,7 @@ export default class seetaTableIndex extends Vue {
// 是否分页 // 是否分页
@Prop({ type: Boolean, default: true }) pagination @Prop({ type: Boolean, default: true }) pagination
// 自动高度，仅适用于父级容器有明确高度的情况 // 自动高度，仅适用于父级容器有明确高度的情况
@Prop({ type: Boolean, default: false }) autoHeight @Prop({ type: Boolean, default: true }) autoHeight
// 最大高度，当autoHeight为false时生效 // 最大高度，当autoHeight为false时生效
@Prop({ type: [Number, String], default: '100%' }) maxHeight @Prop({ type: [Number, String], default: '100%' }) maxHeight
// 是否自动刷新 // 是否自动刷新
...@@ -228,7 +228,7 @@ export default class seetaTableIndex extends Vue { ...@@ -228,7 +228,7 @@ export default class seetaTableIndex extends Vue {
// 计算列表高度 // 计算列表高度
getTableHeight() { getTableHeight() {
this.$nextTick(() => { this.$nextTick(() => {
this.tableHeight = this.refTableBox.getBoundingClientRect().height - 66 this.tableHeight = this.pagination ? this.refTableBox.getBoundingClientRect().height - 66 : this.refTableBox.getBoundingClientRect().height - 25
// console.log(this.tableHeight) // console.log(this.tableHeight)
}) })
} }
...@@ -474,5 +474,5 @@ export default class seetaTableIndex extends Vue { ...@@ -474,5 +474,5 @@ export default class seetaTableIndex extends Vue {
.any-slot .any-slot
// display: inline-block // display: inline-block
vertical-align: middle vertical-align: middle
over-flow: hidden overflow: hidden
</style> </style>
src/views/Account/index.vue
...@@ -146,9 +146,28 @@ export default { ...@@ -146,9 +146,28 @@ export default {
}, },
], ],
tokenList: [ tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' } { number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
], ],
total: 34 total: 20
} }
}, },
watch: { watch: {
......
src/views/Apply/index.vue
...@@ -67,7 +67,23 @@ export default { ...@@ -67,7 +67,23 @@ export default {
], ],
tokenList: [ tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }, { number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' } { number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 2, name: 'aa', type: 'aa', desc: 'aaaa' },
], ],
total: 34 total: 34
} }
......
src/views/DataList/edit.vue
...@@ -36,11 +36,10 @@ ...@@ -36,11 +36,10 @@
style="width: 100%"> style="width: 100%">
<el-table-column label="序号" width="100px"> <el-table-column label="序号" width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <input type="text" v-model="" @blur="handleBlur"> -->
<span style="margin-left: 12px">{{scope.row.field}}</span> <span style="margin-left: 12px">{{scope.row.field}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-for="(column, index) in tableData[0].columns" :key="index" :label="`列${index + 1}`"> <el-table-column v-for="(column, index) in tableData[0].columns" :key="index" :label="`列${index + 1}`" :width="index + 1 === columnIndex ? '220px' : ''">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <div class="column-box"> --> <!-- <div class="column-box"> -->
<div style="display: flex"> <div style="display: flex">
...@@ -52,7 +51,7 @@ ...@@ -52,7 +51,7 @@
:value="item.value"> :value="item.value">
</el-option> </el-option>
</pack-select> </pack-select>
<input type="text" v-model="scope.row.columns[index].value" @blur="handleBlur" placeholder="请输入"> <input type="text" v-model="scope.row.columns[index].value" @blur="handleBlur" placeholder="请输入" class="cell-value">
<!-- <el-select v-model="scope.row.columns[index].type" placeholder="请选择"> <!-- <el-select v-model="scope.row.columns[index].type" placeholder="请选择">
<el-option <el-option
v-for="item in typeOptions" v-for="item in typeOptions"
...@@ -111,6 +110,10 @@ export default { ...@@ -111,6 +110,10 @@ export default {
columns: [ columns: [
{ type: 'base64', value: '122' }, { type: 'base64', value: '122' },
{ type: 'string', value: '122' }, { type: 'string', value: '122' },
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' } { type: 'base64', value: '122' }
] ]
}, { }, {
...@@ -118,6 +121,10 @@ export default { ...@@ -118,6 +121,10 @@ export default {
columns: [ columns: [
{ type: 'base64', value: '122' }, { type: 'base64', value: '122' },
{ type: 'string', value: '122' }, { type: 'string', value: '122' },
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' } { type: 'base64', value: '122' }
] ]
}, { }, {
...@@ -125,19 +132,28 @@ export default { ...@@ -125,19 +132,28 @@ export default {
columns: [ columns: [
{ type: 'base64', value: '122' }, { type: 'base64', value: '122' },
{ type: 'string', value: '122' }, { type: 'string', value: '122' },
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '122' } { type: 'base64', value: '122' }
] ]
}, { }, {
field: '4', field: '4',
columns: [ columns: [
{ type: 'base64', value: '上海市普陀' }, { type: 'base64', value: '上海市普陀上海市普陀' },
{ type: 'string', value: '上海市普陀' }, { type: 'string', value: '上海市普陀上海市普陀' },
{ type: 'base64', value: '上海市普陀' } { type: 'base64', value: '122' },
{ type: 'base64', value: '122' },
{ type: 'string', value: '122' },
{ type: 'string', value: '122' },
{ type: 'base64', value: '上海市普陀上海市普陀' }
] ]
}], }],
total: 34, total: 34,
agoCell: null, agoCell: null,
flexHeight: 0 flexHeight: 0,
columnIndex: 0
} }
}, },
created() { created() {
...@@ -168,9 +184,13 @@ export default { ...@@ -168,9 +184,13 @@ export default {
this.tableData.push({ this.tableData.push({
field: '5', field: '5',
columns: [ columns: [
{ type: 'base64', value: '上海市普陀' }, { type: 'base64', value: '' },
{ type: 'string', value: '上海市普陀' }, { type: 'string', value: '' },
{ type: 'base64', value: '上海市普陀' } { type: 'base64', value: '' },
{ type: 'base64', value: '' },
{ type: 'string', value: '' },
{ type: 'string', value: '' },
{ type: 'base64', value: '' }
] ]
}) })
}, },
...@@ -198,6 +218,7 @@ export default { ...@@ -198,6 +218,7 @@ export default {
}, },
clearCell(cell) { clearCell(cell) {
if (!cell) return if (!cell) return
this.columnIndex = 0
const select = cell.getElementsByClassName('el-select') const select = cell.getElementsByClassName('el-select')
const input = cell.getElementsByTagName('input') const input = cell.getElementsByTagName('input')
select && select[0] && select[0].classList.add('none-display') select && select[0] && select[0].classList.add('none-display')
...@@ -215,6 +236,7 @@ export default { ...@@ -215,6 +236,7 @@ export default {
if (this.agoCell !== cell) { if (this.agoCell !== cell) {
this.clearCell(this.agoCell) this.clearCell(this.agoCell)
} }
this.columnIndex = Number(column.label.substring(1))
cell.getElementsByClassName('el-select')[0].classList.remove('none-display') cell.getElementsByClassName('el-select')[0].classList.remove('none-display')
if (cell.getElementsByTagName('input')[0] && cell.getElementsByTagName('input')[1]) { if (cell.getElementsByTagName('input')[0] && cell.getElementsByTagName('input')[1]) {
cell.getElementsByTagName('input')[0].classList.add('write') cell.getElementsByTagName('input')[0].classList.add('write')
...@@ -369,8 +391,7 @@ export default { ...@@ -369,8 +391,7 @@ export default {
color:#999999 color:#999999
.pagination .pagination
text-align: center text-align: center
margin-top: 24px margin: 20px 0
margin-bottom: 10px
.el-pagination .el-pagination
white-space: nowrap white-space: nowrap
padding: 2px 5px padding: 2px 5px
...@@ -389,6 +410,15 @@ export default { ...@@ -389,6 +410,15 @@ export default {
color: #C0C4CC color: #C0C4CC
.none-display .none-display
display: none display: none
.cell-value
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
&::placeholder
font-size: 14px
font-family: PingFangSC-Regular, PingFang SC
font-weight: 400
color:#999999!important
.buttons .buttons
position: absolute position: absolute
bottom: 0 bottom: 0
......
src/views/DataList/index.vue
...@@ -103,7 +103,24 @@ export default { ...@@ -103,7 +103,24 @@ export default {
}, },
], ],
tokenList: [ tokenList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' } { number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
], ],
total: 34 total: 34
} }
......
src/views/ParamsModel/add.vue
...@@ -315,7 +315,7 @@ export default { ...@@ -315,7 +315,7 @@ export default {
.add-btn .add-btn
height: 32px height: 32px
line-height: 28px line-height: 28px
margin-top: 20px margin-top: 30px
border: 2px dashed #D7DAE0 border: 2px dashed #D7DAE0
border-radius: 2px border-radius: 2px
border-radius: 2px border-radius: 2px
......
src/views/ParamsModel/detail.vue
...@@ -4,38 +4,23 @@ ...@@ -4,38 +4,23 @@
<span class="title">{{'参数模板 / 详情'}}</span> <span class="title">{{'参数模板 / 详情'}}</span>
</div> </div>
<div class="page-content"> <div class="page-content">
<st-form <st-form class="flex-form"
ref="form" ref="form"
label-width="100px" label-width="100px"
:model="form"> :model="form">
<st-form-item <st-form-item :label="'模板名称'+':'">
style="margin-bottom:20px"
:label="'模板名称'+':'"
prop="name">
<span>{{form.name}}</span> <span>{{form.name}}</span>
</st-form-item> </st-form-item>
<st-form-item <st-form-item :label="'模板类型'+':'">
style="margin-bottom:20px"
:label="'模板类型'+':'"
prop="name">
<span>{{form.name}}</span> <span>{{form.name}}</span>
</st-form-item> </st-form-item>
<st-form-item <st-form-item :label="'基础模板'+':'">
style="margin-bottom:20px"
:label="'基础模板'+':'"
prop="name">
<span>{{form.name}}</span> <span>{{form.name}}</span>
</st-form-item> </st-form-item>
<st-form-item <st-form-item :label="'描述'+':'">
style="margin-bottom:20px"
:label="'描述'+':'"
prop="description">
<span>{{form.name}}</span> <span>{{form.name}}</span>
</st-form-item> </st-form-item>
<st-form-item <st-form-item :label="'参数'+':'" class="flex1">
style="margin-bottom:20px"
:label="'参数'+':'"
prop="description">
<st-table <st-table
ref="vTable" ref="vTable"
:options="definitions" :options="definitions"
...@@ -86,12 +71,43 @@ export default { ...@@ -86,12 +71,43 @@ export default {
field: 'teat', field: 'teat',
type: 'string', type: 'string',
value: '上海市普陀区金沙江路' value: '上海市普陀区金沙江路'
}, {
field: 'name',
type: 'number',
value: '122'
}, {
field: 'database',
type: 'table',
value: 'fein_fe'
}, {
field: 'image',
type: 'blob',
value: '24字节'
}, {
field: 'teat',
type: 'string',
value: '上海市普陀区金沙江路'
}, {
field: 'name',
type: 'number',
value: '122'
}, {
field: 'database',
type: 'table',
value: 'fein_fe'
}, {
field: 'image',
type: 'blob',
value: '24字节'
}, {
field: 'teat',
type: 'string',
value: '上海市普陀区金沙江路'
}], }],
total: 0 total: 0
} }
}, },
mounted() { mounted() {
// this.getData()
}, },
methods: { methods: {
} }
...@@ -99,4 +115,15 @@ export default { ...@@ -99,4 +115,15 @@ export default {
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
.page-content
::v-deep.el-form-item
margin-bottom: 20px
.flex-form
display: flex
flex-direction: column
height: 100%
.flex1
flex: 1
::v-deep.el-form-item__content
height: 100%!important
</style> </style>
src/views/ParamsModel/edit.vue
...@@ -315,7 +315,7 @@ export default { ...@@ -315,7 +315,7 @@ export default {
.add-btn .add-btn
height: 32px height: 32px
line-height: 28px line-height: 28px
margin-top: 20px margin-top: 30px
border: 2px dashed #D7DAE0 border: 2px dashed #D7DAE0
border-radius: 2px border-radius: 2px
border-radius: 2px border-radius: 2px
......
src/views/ParamsModel/index.vue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
ref="vTable" ref="vTable"
:options="definitions" :options="definitions"
:data="{ :data="{
list: tokenList, list: oneList,
total: total, total: total,
}" }"
highlight-current-row highlight-current-row
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
ref="vTable" ref="vTable"
:options="definitions" :options="definitions"
:data="{ :data="{
list: tokenList, list: twoList,
total: total, total: total,
}"> }">
<div slot="operate" slot-scope="row"> <div slot="operate" slot-scope="row">
...@@ -95,7 +95,26 @@ export default { ...@@ -95,7 +95,26 @@ export default {
slotName: 'operate' slotName: 'operate'
}, },
], ],
tokenList: [ oneList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaasdfasdfasdaa' },
{ number: 1, name: 'aa', type: 'aa', desc: '描述描述描述描述描述描述' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaasdfasdfasdaa' },
{ number: 1, name: 'aa', type: 'aa', desc: '描述描述描述描述描述描述' },
],
twoList: [
{ number: 1, name: 'aa', type: 'aa', desc: 'aaasdfasdfasdaa' },
{ number: 1, name: 'aa', type: 'aa', desc: '描述描述描述描述描述描述' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaasdfasdfasdaa' },
{ number: 1, name: 'aa', type: 'aa', desc: '描述描述描述描述描述描述' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaasdfasdfasdaa' }, { number: 1, name: 'aa', type: 'aa', desc: 'aaasdfasdfasdaa' },
{ number: 1, name: 'aa', type: 'aa', desc: '描述描述描述描述描述描述' }, { number: 1, name: 'aa', type: 'aa', desc: '描述描述描述描述描述描述' },
{ number: 1, name: 'aa', type: 'aa', desc: 'aaaa' }, { number: 1, name: 'aa', type: 'aa', desc: 'aaaa' },
...@@ -138,6 +157,14 @@ export default { ...@@ -138,6 +157,14 @@ export default {
.level .level
width: calc(50% - 10px) width: calc(50% - 10px)
padding: 14px 20px padding: 14px 20px
.table-list
height: calc(100% - 60px)
.list-content
height: 100%
.table-box
height: 100%
::v-deep.el-table
max-height: 100%!important
.content-header .content-header
display: flex display: flex
justify-content: space-between justify-content: space-between
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!