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> <template>
<div> <div>
<el-table <div style="height:600px;">
v-loading="loading" <el-scrollbar style="height: 600px;">
class="processList" <el-table
border v-loading="loading"
:data="processList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)" class="processList"
height="495" border
style="width: 100%" :data="processList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
@selection-change="handleSelectionChange" 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"> <el-table-column type="index" label="序号" width="50" :index="nIndex" />
<template slot-scope="scope"> <el-table-column label="工序名称" prop="processName" :show-overflow-tooltip="true">
{{ scope.row.processName || '-' }} <template slot-scope="scope">
</template> {{ scope.row.processName || '-' }}
</el-table-column> </template>
<el-table-column label="生产车间" prop="workshop"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="生产车间" prop="workshop">
{{ scope.row.workshop || '-' }} <template slot-scope="scope">
</template> {{ scope.row.workshop || '-' }}
</el-table-column> </template>
<el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime">
<span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span> <template slot-scope="scope">
</template> <span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
</el-table-column> </template>
<el-table-column label="操作人" prop="createBy" width="210px"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="操作人" prop="createBy" width="210px">
{{ scope.row.createBy || '-' }} <template slot-scope="scope">
</template> {{ scope.row.createBy || '-' }}
</el-table-column> </template>
<el-table-column </el-table-column>
label="操作" <el-table-column
class-name="small-padding fixed-width" label="操作"
width="180px" class-name="small-padding fixed-width"
> width="180px"
<template slot-scope="scope"> >
<div class="processListBtns"> <template slot-scope="scope">
<el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)"> <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="handleUpdate(scope.row)">
</el-button> 修改
<el-button :type="typeParent" :size="size" @click="handleDelete(scope.row)"> </el-button>
删除 <el-button :type="typeParent" :size="size" @click="handleDelete(scope.row)">
</el-button> 删除
</div> </el-button>
</template> </div>
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
<el-scrollbar />
</el-scrollbar>
<div />
</div>
</div> </div>
</template> </template>
...@@ -71,6 +76,11 @@ export default { ...@@ -71,6 +76,11 @@ export default {
required: true, required: true,
type: Number, type: Number,
default: null default: null
},
loading: {
required: true,
type: Boolean,
default: null
} }
}, },
data() { data() {
...@@ -103,20 +113,11 @@ export default { ...@@ -103,20 +113,11 @@ export default {
} }
} }
// TODO: 滚动条样式 此为设置背景颜色 .el-scrollbar__wrap{
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { overflow-x: hidden;
width: 0;
background-color: white;
} }
.el-scrollbar__bar.is-horizontal {
// 设置宽度 display: none;
::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;
} }
</style> </style>
src/views/processManagement/basicProcessManagement/index.vue
View file @ 4d79c0dc
...@@ -42,30 +42,26 @@ ...@@ -42,30 +42,26 @@
<!-- TODO: 以下为基础工序管理列表 --> <!-- TODO: 以下为基础工序管理列表 -->
<div class="mb12 font-small-bold">基础工序列表</div> <div class="mb12 font-small-bold">基础工序列表</div>
<div class="ProcessTable"> <transition name="fade-transform" mode="out-in">
<transition name="fade-transform" mode="out-in"> <component
<component :is="ProcessTable"
: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"
:key="queryParams.pageNum" :key="queryParams.pageNum"
:total="total" :query-params="queryParams"
:page.sync="queryParams.pageNum" :process-list="processList"
:limit.sync="queryParams.pageSize" :n-index="nIndex"
@pagination="getList" :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> </div>
...@@ -445,11 +441,11 @@ export default { ...@@ -445,11 +441,11 @@ export default {
width: 4px; width: 4px;
} }
.ProcessTable{ //.ProcessTable{
padding: 5px; // padding: 5px;
margin: 0 auto; // margin: 0 auto;
height: 495px; // height: 495px;
} //}
//TODO: readOnly里去删除el-input的边框样式 //TODO: readOnly里去删除el-input的边框样式
.aboutSingleDetails { .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