Lexus-media/src/views/data/components/UploadInforTable.vue

<template>
  <div class="table_template">
    <table class="table">
        <thead>
            <tr>
                <td>序号</td>
                <td>经销商名称</td>
                <td>DLR Code</td>
                <td>所属区域</td>
                <td>筛选</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: index%2 === 0 }">
                <td>{{ index + 1 }}</td>
                <td v-for="(item, index) in obj" :key="index"   >
                    {{ item }}
                </td>
                <td>
                    <img src="../../../img/add.png" @click="changeIcon(index)" v-if="imgFlag[index]">
                    <img src="../../../img/delete.png" @click="changeIcon(index)" v-else>
                </td>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
export default {
    props: {
        // 表数据
        tableData: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 操作样式
        operationStyle: {
            type: Object,
            default: () => {
                return {
                    color: '#0000ff'
                }
            }
        },
        // imgFlag
        imgFlag: {
            type: Array,
            default: () => {
                let arr = new Array(20).fill(20);
                return arr
            }
        }
    },
    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%;
        thead{
            background-color: #8D9092;
            height: 36px;
            color: #fff;
        }
        td{
            border: 1px solid #ccc;
        }
        span{
            &:hover{
                cursor: pointer;
            }
        }
    }
}
.table_gray{
    background: #f5f5f5;
}
img{
    width: 20px;
    height: 20px;
}
td{
    width: 20%;
    height: 36px;
}
</style>