Lexus-media/src/views/parameter/components/Grouping/ModalTable.vue

<template>
  <div class="table_template">
    <table class="table">
        <thead>
            <tr :style="tableHeadStyle">
                <td v-for="(item, index) in tableHeader" :key="index" :style="tableHeadStyle">{{ item }}</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: !discolor && index%2 === 0 }">
                <td :style="trStyle" v-if="flag">{{ index + 1 }}</td>
                <td v-for="(item, index) in obj" :key="index" :style="trStyle">
                    {{ item }}
                </td>
                <td :style="trStyle">
                    <img src="../../../../img/add.png" @click="changeIcon(index)" :style="operationStyle" v-if="imgFlag[index]">
                    <img src="../../../../img/delete.png" @click="changeIcon(index)" :style="operationStyle" v-else>
                </td>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
export default {
    props: {
        // 表数据
        tableData: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 表头
        tableHeader: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 表头样式
        tableHeadStyle: {
            type: Object,
            default: () => {
                return {
                    background: '#848484',
                    height: '50px',
                    color: '#fff'
                }
            }
        },
        // 操作样式
        operationStyle: {
            type: Object,
            default: () => {
                return {
                    color: '#0000ff'
                }
            }
        },
        // imgFlag
        imgFlag: {
            type: Array,
            default: () => {
                let arr = new Array(20).fill(20);
                return arr
            }
        },
        // 表格除去表头的样式
        trStyle: {
            type: Object,
            default: () => {
                return {
                    width: '200px',
                    height: '50px'
                }
            }
        },
        // 是否隔行变色
        discolor: {
            type: Boolean,
            default: true
        },
        // 每页表格共有多少数据
        pageSize: {
            type: Number,
            default: 20
        },
        flag: {
            type: Boolean,
            default: true
        },
    },
    methods: { 
        changeIcon: function(index) {
            console.log(index);
            this.$emit('change_icon', index);
        }
    },
    mounted() {
    },
    data() {
        return {
        }
    }
};
</script>

<style scoped lang="less">
.table_template{
    text-align: center;
    .table{
        background-color: #fff;
        border-collapse:collapse;
        border:none;
        width: 100%;
        td{
            border: 1px solid #ccc;
        }
        span{
            &:hover{
                cursor: pointer;
            }
        }
    }
}
.table_gray{
    background: #f5f5f5;
}
</style>