Skip to content

T
template_vue
Commit 4d79c0dc authored by AiNoeLiYa's avatar AiNoeLiYa
Browse files
Options

格式工序管理列表的滚动条 

Signed-off-by: 's avatarAiNoeLiYa <jzbcxy@gmail.com>
parent 76b69975
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 91 deletions
src/views/processManagement/basicProcessManagement/componets/processTable.vue
View file @ 4d79c0dc
<template>
<div>
<el-table
v-loading="loading"
class="processList"
border
:data="processList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
height="495"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="50" :index="nIndex" />
<el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.processName || '-' }}
</template>
</el-table-column>
<el-table-column label="生产车间" prop="workshop">
<template slot-scope="scope">
{{ scope.row.workshop || '-' }}
</template>
</el-table-column>
<el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</template>
</el-table-column>
<el-table-column label="操作人" prop="createBy" width="210px">
<template slot-scope="scope">
{{ scope.row.createBy || '-' }}
</template>
</el-table-column>
<el-table-column
label="操作"
class-name="small-padding fixed-width"
width="180px"
>
<template slot-scope="scope">
<div class="processListBtns">
<el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
详情
</el-button>
<el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
修改
</el-button>
<el-button :type="typeParent" :size="size" @click="handleDelete(scope.row)">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<div style="height:600px;">
<el-scrollbar style="height: 600px;">
<el-table
v-loading="loading"
class="processList"
border
:data="processList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" label="序号" width="50" :index="nIndex" />
<el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.processName || '-' }}
</template>
</el-table-column>
<el-table-column label="生产车间" prop="workshop">
<template slot-scope="scope">
{{ scope.row.workshop || '-' }}
</template>
</el-table-column>
<el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime">
<template slot-scope="scope">
<span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</template>
</el-table-column>
<el-table-column label="操作人" prop="createBy" width="210px">
<template slot-scope="scope">
{{ scope.row.createBy || '-' }}
</template>
</el-table-column>
<el-table-column
label="操作"
class-name="small-padding fixed-width"
width="180px"
>
<template slot-scope="scope">
<div class="processListBtns">
<el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
详情
</el-button>
<el-button :type="typeParent" :size="size" @click="handleUpdate(scope.row)">
修改
</el-button>
<el-button :type="typeParent" :size="size" @click="handleDelete(scope.row)">
删除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-scrollbar />
</el-scrollbar>
<div />
</div>
</div>
</template>
......@@ -71,6 +76,11 @@ export default {
required: true,
type: Number,
default: null
},
loading: {
required: true,
type: Boolean,
default: null
}
},
data() {
......@@ -103,20 +113,11 @@ export default {
}
}
// TODO: 滚动条样式 此为设置背景颜色
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
width: 0;
background-color: white;
.el-scrollbar__wrap{
overflow-x: hidden;
}
// 设置宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
width: 3px;
opacity: 0.5;
}
// 此为设置滚动条内部颜色
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 15px;
background-color: #b3b3b3;
.el-scrollbar__bar.is-horizontal {
display: none;
}
</style>
src/views/processManagement/basicProcessManagement/index.vue
View file @ 4d79c0dc
......@@ -42,30 +42,26 @@
<!-- TODO: 以下为基础工序管理列表 -->
<div class="mb12 font-small-bold">基础工序列表</div>
<div class="ProcessTable">
<transition name="fade-transform" mode="out-in">
<component
:is="ProcessTable"
:key="queryParams.pageNum"
:query-params="queryParams"
:process-list="processList"
:n-index="nIndex"
@handle-detail="handleDetail"
@handle-update="handleUpdate"
@handle-delete="handleDelete"
/>
</transition>
</div>
<div class="Pagination">
<pagination
v-show="total>0"
<transition name="fade-transform" mode="out-in">
<component
:is="ProcessTable"
:key="queryParams.pageNum"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
:query-params="queryParams"
:process-list="processList"
:n-index="nIndex"
:loading.sync="loading"
@handle-detail="handleDetail"
@handle-update="handleUpdate"
@handle-delete="handleDelete"
/>
</div>
</transition>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
......@@ -445,11 +441,11 @@ export default {
width: 4px;
}
.ProcessTable{
padding: 5px;
margin: 0 auto;
height: 495px;
}
//.ProcessTable{
// padding: 5px;
// margin: 0 auto;
// height: 495px;
//}
//TODO: readOnly里去删除el-input的边框样式
.aboutSingleDetails {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment