ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

表格二次封装1

Browse Source
pull/122/head
lukeyan 1 year ago
parent f2aad8473d
commit d912224992
4 changed files with 576 additions and 2 deletions
Show Stats Download Patch File Download Diff File

393
src/components/publicModule/lkyTable.vue
Unescape View File

@ -0,0 +1,393 @@
<!-- 封装表格 -->
<template>
<!-- 本组件样式包含表格、分页 -->
<div class="table_pagination_body" :style="table_pagination_style">
<el-table
class="lky_table"
:data="table_data"
:height="table_height"
:cell-style="{ background: 'revert', 'text-align': 'center' }"
>
<!-- 是否需要多行选择数据 -->
<el-table-column
v-if="table_select"
type="selection"
width="55"
align="center"
>
</el-table-column>
<!-- 是否需要数据序号 -->
<el-table-column
v-if="table_index"
label="序号"
type="index"
width="70"
align="center"
></el-table-column>
<template v-for="item in table_columns">
<!-- 如果有多级表头 -->
<template v-if="item.children">
<el-table-column :key="item.prop" :label="item.label" align="center">
<template>
<el-table-column
v-for="val in item.children"
:key="val.prop"
:prop="val.prop"
:label="val.label"
:width="val.width"
align="center"
>
<!-- 如果val.picture为ture时，则该列单元格可显示图片 -->
<template v-if="val.picture" #default="{ row }">
<!-- 二级表数据照片 -->
<el-image
:src="row.pic_child"
style="width: 42px; height: 42px"
>
<div slot="error" class="image-slot">
<img src="@/assets/companyFile/avatar.png" alt="" />
</div>
</el-image>
</template>
</el-table-column>
</template>
</el-table-column>
</template>
<!-- 如果没有多级表头 -->
<template v-else>
<el-table-column
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
align="center"
>
<!-- 如果item.picture为ture时，则该列单元格可显示图片 -->
<template v-if="item.picture" #default="{ row }">
<el-image
:src="row.pic"
style="width: 42px; height: 42px"
>
<div slot="error" class="image-slot">
<img src="@/assets/companyFile/avatar.png" alt="" />
</div>
</el-image>
</template>
<!-- 如果item.picture_two为ture时，则该列单元格可显示图片 -->
<template v-else-if="item.picture_two" #default="{ row }">
<el-image
:src="row.pic_two"
style="width: 42px; height: 42px"
>
<div slot="error" class="image-slot">
<img src="@/assets/companyFile/avatar.png" alt="" />
</div>
</el-image>
</template>
</el-table-column>
</template>
</template>
<!-- 是否需要操作单元格 -->
<el-table-column
v-if="table_operation"
:label="operation_label"
align="center"
>
<template slot-scope="scope">
<el-button
size="small"
class="operation_btn"
@click="open(scope.row)"
>{{ operation_text }}</el-button
>
</template>
</el-table-column>
</el-table>
<div class="table_pagination" :style="pagination_style">
<el-pagination
:background="true"
@size-change="handle_size_change"
@current-change="handle_current_change"
:page-sizes="page_sizes"
:pager-count="5"
:page-size="pageSize"
:current-page="pageNum"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "lkyTable",
props: {
// 本组件盒子宽
table_pagination_width: {
type: String,
default: "",
},
// 本组件盒子高
table_pagination_height: {
type: String,
default: "",
},
// 表格数据
table_data: {
type: Array,
default: () => [],
},
// 表格高度
table_height: {
type: String,
default: "",
},
// 是否需要选择表格行数据
table_select: {
type: Boolean,
default: false,
},
// 是否需要表格序号
table_index: {
type: Boolean,
default: false,
},
// 单元格名称
table_columns: {
type: Array,
default: () => [],
},
// 是否需要操作单元格
table_operation: {
type: Boolean,
default: false,
},
// 操作单元格表头名
operation_label: {
type: String,
default: "",
},
// 操作单元格按钮名称
operation_text: {
type: String,
default: "",
},
// 分页可选页数类型
page_sizes: {
type: Array,
default: () => [],
},
// 每页多少条
pageSize: {
type: Number,
default: 0,
},
// 当前多少页
pageNum: {
type: Number,
default: 0,
},
// 数据总条数
total: {
type: Number,
default: 0,
},
// 分页盒子宽,分页盒子高固定
pagination_width: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
// 根据实际页面需求确定整体盒子宽高
table_pagination_style() {
return {
"--table_pagination-width": this.table_pagination_width + "vw",
"--table_pagination-height": this.table_pagination_height + "vh",
};
},
// 根据实际页面需求确定分页盒子宽度
pagination_style() {
return {
"--pagination-width": this.pagination_width + "vw",
};
},
},
methods: {
// 操作单元格点击事件,由调用该组件的父组件执行 方法名定义成open_event
open(row) {
this.$emit("open_event", row);
},
// 如果二级表格需要展示照片的话
get_child_img_url(row) {
this.$emit("get_child_img_url", row);
},
// 如果一级表格需要展示照片的话
get_img_url(row) {
this.$emit("get_img_url", row);
},
// 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
handle_size_change(val) {
this.$emit("size_change", val);
},
// 前往哪一页 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成nun_change
handle_current_change(val) {
this.$emit("num_change", val);
},
},
};
</script>
<style lang="less" scoped>
.table_pagination_body {
margin-top: 1vh;
margin-left: 0.4vw;
width: var(--table_pagination-width);
height: var(--table_pagination-height);
}
/* 表格样式 */
/deep/.lky_table.el-table {
background: rgba(0, 0, 0, 0);
border: 0.1px solid #3f5564;
thead {
color: #fff;
font-weight: 500;
border: 0.1px solid #3f5564;
background: linear-gradient(
to right,
#284f49,
#2f6363 5%,
#233b38 80%
) !important;
& th {
background-color: transparent;
}
& tr {
background-color: transparent;
}
}
tr {
color: #fff;
background: rgba(0, 0, 0, 0);
}
}
/* 单元格边框样式 */
/deep/.el-table th.el-table__cell.is-leaf {
border: 0.1px solid #3f5564;
}
/* 单元格边框样式 */
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border: 0.1px solid #3f5564;
}
/deep/.el-table--border th.el-table__cell,
.el-table__fixed-right-patch {
border: 0.1px solid #3f5564;
}
/* 表格右侧白线取消 */
/deep/.el-table--border::after,
.el-table--group::after {
width: 0px;
}
/* 表格内容过长时进度条盒子样式 */
/deep/.el-table__body-wrapper::-webkit-scrollbar {
display: none;
width: 6px;
background-color: #5e666a;
border-radius: 4px;
}
/* 表格内容过长时进度条样式 */
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
display: none;
width: 5px;
background-color: #3c4b4a;
border-radius: 4px;
}
/* 表格操作单元格按钮样式 */
/deep/.el-button.operation_btn {
background-color: #182527;
border: 0px;
color: #2fabdc;
}
/* 表格操作单元格按钮操作时样式 */
/deep/.el-button.operation_btn:hover,
.el-button.operation_btn:focus {
background-color: #182527;
border: 0px;
color: #2fabdc;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.table_pagination {
width: var(--pagination-width);
height: 5vh;
display: flex;
flex-direction: row-reverse;
/deep/.el-input--suffix .el-input__inner {
color: #fff;
border: 0.1px solid #34a6a6;
border-radius: 0px;
background: rgba(0, 0, 0, 0);
width: 5vw;
height: 2.6vh;
line-height: 2.6vh;
}
/deep/.el-input__icon {
color: #fff;
line-height: 2.6vh;
height: 2.6vh;
}
/deep/.el-pagination {
margin-top: 1vh;
.el-pagination__total {
color: #fff;
}
.el-input__inner {
border-radius: 0px;
background: #3c4b4a;
border: 0.1px solid #277f79;
color: #fff;
height: 2.6vh;
}
.btn-prev {
border-radius: 0px;
background: #3c4b4a;
border: 0.1px solid #277f79;
color: #fff;
height: 2.6vh;
}
ul {
li {
border: 0.1px solid #277f79;
background: #3c4b4a;
color: #fff;
height: 2.6vh;
}
}
.btn-next {
border: 0.1px solid #277f79;
border-radius: 0px;
background: #3c4b4a;
color: #fff;
height: 2.6vh;
}
.el-pager {
li {
background: #3c4b4a !important;
}
}
.el-pagination__jump {
height: 2.6vh;
line-height: 2.6vh;
color: #fff;
}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
border: 0.1px solid #76eae4;
}
}
</style>

3
src/main.js
Unescape View File

@ -6,10 +6,11 @@ import router from './router'
import store from './store'
import Message from './components/message';
import erupload from "./components/upload";
import lkyTable from "./components/publicModule/lkyTable" // 本组件样式包含普通表格、分页
Vue.use(ElementUI);
Vue.use(Message)
Vue.component('erupload', erupload)
Vue.component('lkyTable', lkyTable)
const vm = new Vue({
el: '#app',
router,

7
src/router/index.js
Unescape View File

@ -67,12 +67,17 @@ const routes = [
name: 'closeLoopDispose',
component: () => import('@/views/closeLoopDispose'),
},
// 应用超市
// 安商惠企
{
path:'applySupermarket',
name:'applySupermarket',
component: () => import('@/views/applySupermarket'),
},
{
path:'module',
name:'module',
component: () => import('@/views/module'),
},
]
},
{

175
src/views/module/index.vue
Unescape View File

@ -0,0 +1,175 @@
<!-- 仅做模块化展示使用 -->
<template>
<div>
<lkyTable
:table_pagination_width="table_pagination_width"
:table_pagination_height="table_pagination_height"
:table_data="table_data"
:table_height="table_height"
:table_select="table_select"
:table_index="table_index"
:table_columns="table_columns"
:table_operation="table_operation"
:operation_label="operation_label"
:operation_text="operation_text"
:page_sizes="page_sizes"
:pageSize="pageSize"
:pageNum="pageNum"
:total="total"
@open_event="open_event"
@size_change="size_change"
@num_change="num_change"
></lkyTable>
</div>
</template>
<script>
export default {
data() {
return {
table_pagination_width: "60",
table_pagination_height: "60",
table_data: [
{
company: "宁波保润有限石化公司",
personNum: "22",
idcard: "34567",
unit: "最小单位",
level: "一级",
pic_child:'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
},
{
company: "宁波保润石化公司",
personNum: "22",
idcard: "34567",
unit: "最小单位",
level: "四级",
pic_child:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
},
{
company: "宁波保润石化公司",
personNum: "22",
idcard: "34567",
unit: "最小单位",
level: "一级",
pic_child:'1222.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
},
{
company: "宁波保润石化公司",
personNum: "22",
idcard: "34567",
unit: "最小单位",
level: "三级",
pic_child:'1222.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
},
{
company: "宁波保润石化公司",
personNum: "22",
idcard: "34567",
unit: "最小单位",
level: "一级",
pic_child:'1222.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
},
{
company: "宁波保润石化公司",
personNum: "22",
idcard: "34567",
unit: "最小单位",
level: "二级",
pic:'1000.png',
picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
pic_child:'1222.png',
},
],
table_height: "592", // 表格高度根据实际场景确定高度
table_select: false,
table_index: true,
table_columns: [
{
prop: "company_all",
label: "公司全览",
children: [
{
prop: "company",
label: "公司名称",
width: "180",
},
{
prop: "personPic",
label: "个人照片",
width: "120",
picture: true,
},
{
prop: "personNum",
label: "公司人数",
width: "120",
},
{
prop: "idcard",
label: "公司id",
width: "90",
},
{
prop: "unit",
label: "公司单位",
width: "180",
},
],
},
{
prop: "level",
label: "公司等级",
width: "80",
},
{
prop: "pic",
label: "公司照片",
width: "120",
picture: true,
},
{
prop: "person_pic",
label: "个人照片",
width: "100",
picture_two: true,
},
],
table_operation: true,
operation_label: "操作",
operation_text: "详情",
page_sizes: [4, 6],
pageSize: 4,
pageNum: 1,
total: 8,
pagination_width: "60",
};
},
methods: {
get_search() {
console.log("123");
},
// 表格详情点击事件
open_event(row) {
console.log("row456", row);
},
// 分页--每页多少条
size_change(val) {
this.pageNum = 1;
this.pageSize = val;
this.get_search();
},
// 分页--前往哪一页
num_change(val) {
this.pageNum = val;
this.get_search();
},
},
};
</script>
<style lang="less" scoped>
</style>
Write Preview
Loading…
Cancel
Save