zhanghua
9 天以前 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3
src/components/Table/index.vue
@@ -1,11 +1,14 @@
<template>
    <div class="Table">
        <div class="datatable">
            <el-table ref="multipleTable" :data="tableData" style="width: 100%"
                :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
            <el-table
                border
                stripe
                ref="multipleTable" :data="tableData" style="width: 100%"
                :header-cell-style="{'background':'#F5F5F5','font-size':'14px','font-weight':'650','line-height':'45px'}"
                :row-class-name="tableRowClassName">
                <el-table-column type="selection" :min-width="5">
                </el-table-column>
                <el-table-column type="selection" min-width="5"> </el-table-column>
                <el-table-column v-for="item in option.group" :key="item.prop" :label="item.label"
                    :prop="item.prop" :min-width="item['min-width'] ? item['item.min-width']:'10'">
                    <template slot-scope="scope">
@@ -13,11 +16,11 @@
                            {{scope.row[item.prop]}}
                        </div>
                        <slot v-else-if="item.type === 'operation'" name="operation" :info="scope">
                        </slot>
                        <slot name="status" v-else-if="item.type === 'status'" :info="scope">
                        </slot>
                        <slot name='time' v-else-if="item.type === 'time'" :timeobj="scope">
                        <slot name='time' v-else-if="item.type === 'time'" :timeobj="scope">
                        </slot>
                    </template>
@@ -78,6 +81,10 @@
        }
    },
    props: {
      getTableList: {
        type: Function,
        default: () => {}
      },
        // 表格数据
        tableData: {
            type: Array,
@@ -120,12 +127,11 @@
    methods: {
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
            if ((rowIndex + 1) % 2 === 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            return '';
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
@@ -170,7 +176,7 @@
    width: 100%;
    .el-table {
        color: #4b9bb7;
        // color: #4b9bb7;
    }
    .tools {
@@ -183,7 +189,7 @@
            display: flex;
            .sp-item {
                border: 1px solid #17324c;
                // border: 1px solid #17324c;
            }
            .funsItem {
@@ -205,7 +211,7 @@
                &::v-deep .el-input__inner {
                    border: none;
                    background-color: #09152f;
                    // background-color: #09152f;
                }
                &:hover .el-checkbox {
@@ -220,31 +226,9 @@
            display: flex;
            line-height: 50px;
            justify-content: center;
            .el-pagination {
                &::v-deep li,
                &::v-deep .btn-prev,
                &::v-deep .btn-next {
                    background-color: #071f39;
                    color: #4b9bb7;
                }
                &::v-deep .active {
                    background-color: #409eff;
                    color: #fff;
                }
            }
        }
    }
    &::v-deep .warning-row {
        background-color: #06122c;
    }
    &::v-deep .success-row {
        background-color: #071f39;
    }
    .operationBox {
        display: flex;
@@ -254,4 +238,4 @@
        background-color: #4b9bb7;
    }
}
</style>
</style>