refactor: 封装全选组件

This commit is contained in:
chenjianxing 2021-01-04 15:56:31 +08:00
parent c507e86f52
commit 1fede9b66b
3 changed files with 71 additions and 45 deletions

View File

@ -9,25 +9,18 @@
<el-table v-loading="result.loading" <el-table v-loading="result.loading"
ref="apiDefinitionTable" ref="apiDefinitionTable"
border border
:data="tableData" row-key="id" class="test-content adjust-table api-list" :data="tableData" row-key="id" class="test-content adjust-table ms-select-all"
@select-all="handleSelectAll" @select-all="handleSelectAll"
@select="handleSelect" :height="screenHeight"> @select="handleSelect" :height="screenHeight">
<el-table-column width="20" type="selection"/> <el-table-column width="50" type="selection"/>
<ms-table-select-all
:page-size="pageSize"
:total="total"
@selectPageAll="isSelectDataAll(false)"
@selectAll="isSelectDataAll(true)"/>
<el-table-column width="30" :resizable="false" align="center"> <el-table-column width="30" :resizable="false" align="center">
<el-dropdown slot="header">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native.stop="isSelectDataAll(true)">
{{$t('api_test.batch_menus.select_all_data',[total])}}
</el-dropdown-item>
<el-dropdown-item @click.native.stop="isSelectDataAll(false)">
{{$t('api_test.batch_menus.select_show_data',[tableData.length])}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<template v-slot:default="scope"> <template v-slot:default="scope">
<show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/> <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/>
</template> </template>
@ -127,10 +120,12 @@
import {getCurrentProjectID} from "@/common/js/utils"; import {getCurrentProjectID} from "@/common/js/utils";
import {WORKSPACE_ID} from '../../../../../../common/js/constants'; import {WORKSPACE_ID} from '../../../../../../common/js/constants';
import ApiListContainer from "./ApiListContainer"; import ApiListContainer from "./ApiListContainer";
import MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
export default { export default {
name: "ApiList", name: "ApiList",
components: { components: {
MsTableSelectAll,
ApiListContainer, ApiListContainer,
MsTableButton, MsTableButton,
MsTableOperatorButton, MsTableOperatorButton,
@ -467,36 +462,7 @@
.search-input { .search-input {
float: right; float: right;
width: 300px; width: 300px;
/*margin-bottom: 20px;*/
margin-right: 20px; margin-right: 20px;
} }
.api-list >>> th:first-child {
/*border: 1px solid #DCDFE6;*/
/*border-right: 0px;*/
/*border-top-left-radius:5px;*/
/*border-bottom-left-radius:5px;*/
/*width: 20px;*/
}
.api-list >>> th:nth-child(2) {
/*border: 1px solid #DCDFE6;*/
/*border-left: 0px;*/
/*border-top-right-radius:5px;*/
/*border-bottom-right-radius:5px;*/
}
.api-list >>> th:first-child>.cell {
padding: 5px;
width: 30px;
}
.api-list >>> th:nth-child(2)>.cell {
/*background-color: black;*/
}
.api-list >>> .el-dropdown {
float: left;
}
</style> </style>

View File

@ -0,0 +1,28 @@
<template>
<el-table-column width="1" :resizable="false" align="center">
<el-dropdown slot="header">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native.stop="$emit('selectAll')">
{{$t('api_test.batch_menus.select_all_data',[total])}}
</el-dropdown-item>
<el-dropdown-item @click.native.stop="$emit('selectPageAll')">
{{$t('api_test.batch_menus.select_show_data',[pageSize])}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-table-column>
</template>
<script>
export default {
name: "MsTableSelectAll",
props: ['total', 'pageSize']
}
</script>
<style scoped>
</style>

View File

@ -120,7 +120,6 @@ html,body {
padding-right: 60px; padding-right: 60px;
} }
/* 滚动条样式 */ /* 滚动条样式 */
::-webkit-scrollbar{ ::-webkit-scrollbar{
width: 5px; width: 5px;
@ -137,3 +136,36 @@ html,body {
background-color: transparent; background-color: transparent;
position: fixed; position: fixed;
} }
/* <-- 表格全选样式 */
.ms-select-all th:first-child {
border: 1px solid #DCDFE6;
border-radius:5px;
padding: 0px;
margin-top: 5px;
display: inline-block;
margin-top: 25px;
width: 50px;
}
.ms-select-all th:nth-child(2) {
overflow: visible;
}
.ms-select-all th:first-child>.cell {
padding: 5px;
width: 35px;
}
.ms-select-all th:nth-child(2)>.cell {
overflow: visible;
}
.ms-select-all .el-icon-arrow-down {
position: absolute;
display: inline-block;
top: -3px;
left: -40px;
width: 30px;
}
/* 表格全选样式 --> */