gdy_pc_8/src/newPerformance/components/ExamineContrast.vue

<template>
    <div class="contrast-container">
        <div class="search-box">
            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
            <el-select v-model="value" placeholder="请选择" style="width: 170px; margin-left: 20px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="btn-list">
            <el-button type="primary" size="small" v-for="item in btnList" :key="item.id">{{ item.title }}</el-button>
        </div>
        <div style="width: 100%; padding: 0 20px; box-sizing: border-box;">
            <el-table ref="fmeaTableRef2" :data="tableData" stripe style="width: 100%; " border
                v-table-move="['fmeaTableRef2']" :header-cell-style="{ background: '#f5f7fa' }">
                <el-table-column v-for="(item, index) in tableHeader" :prop="item.prop" :label="item.label"
                    :key="item.label" align="center">
                    <template slot-scope="scope">
                        <div v-if="index > 0 && scope.row[item.prop] && scope.row[item.prop].score">
                            {{ scope.row[item.prop].score }}
                        </div>
                        <div v-else>
                            {{ scope.row.name }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            options: [{
                value: '选项1',
                label: '进行中'
            }, {
                value: '选项2',
                label: '未开始'
            }, {
                value: '选项3',
                label: '已结束'
            }],
            value: '进行中',
            btnList: [
                { id: 1, title: "考核A" },
                { id: 2, title: "考核B" },
                { id: 3, title: "考核C" },
                { id: 4, title: "考核D" },
                { id: 5, title: "考核E" },
                { id: 6, title: "考核F" },
                { id: 7, title: "考核G" },
                { id: 8, title: "考核H" },
                { id: 9, title: "考核I" },
                { id: 10, title: "考核J" },
                { id: 11, title: "考核K" },
                { id: 12, title: "考核L" },
                { id: 13, title: "考核M" },
                { id: 14, title: "考核N" },
                { id: 15, title: "考核O" },
                { id: 16, title: "考核P" },
                { id: 17, title: "考核Q" }
            ],
            tableHeader: [
                { prop: 'name', label: "姓名" },
                { prop: 'examine_a', label: "考核A" },
                { prop: 'examine_b', label: "考核B" },
                { prop: 'examine_c', label: "考核C" },
                { prop: 'examine_d', label: "考核D" },
                { prop: 'examine_e', label: "考核E" },
                { prop: 'examine_f', label: "考核F" },
                { prop: 'examine_g', label: "考核G" },
                { prop: 'examine_h', label: "考核H" },
                { prop: 'examine_i', label: "考核I" },
                { prop: 'examine_j', label: "考核J" },
                { prop: 'examine_k', label: "考核K" },
                { prop: 'examine_l', label: "考核L" },
                { prop: 'examine_m', label: "考核M" },
                { prop: 'examine_n', label: "考核N" },
                { prop: 'examine_o', label: "考核O" },
                { prop: 'examine_p', label: "考核P" },
                { prop: 'examine_q', label: "考核Q" }
            ],
            tableData: [
                {
                    name: "刘一",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "陈二",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "张三",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "李四",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "王五",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "赵六",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "孙七",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "周八",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "吴九",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                },
                {
                    name: "郑十",
                    examine_a: { score: 99 },
                    examine_b: { score: 88 },
                    examine_c: { score: 88 },
                    examine_d: { score: 77 },
                    examine_e: { score: 77 },
                    examine_f: { score: 77 },
                    examine_g: { score: 66 },
                    examine_h: { score: 66 },
                    examine_i: { score: 66 },
                    examine_j: { score: 55 },
                    examine_k: { score: 55 },
                    examine_l: { score: 55 },
                    examine_m: { score: 55 },
                    examine_n: { score: 55 },
                    examine_o: { score: 55 },
                    examine_p: { score: 55 },
                    examine_q: { score: 55 }
                }

            ],
        }
    }
}

</script>


<style scoped="scoped" lang="scss">
.contrast-container {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .search-box {
        display: flex;
        padding: 20px;
        box-sizing: border-box;
    }

    .btn-list {
        display: flex;
        padding: 0 20px 20px 20px;
        box-sizing: border-box;
    }
}
</style>