foster-pc-vue/src/views/workDetail/components/table.vue

<template>
    <div class="table">
        <div class="th">
            <div
                class="td width"
                :class="{ special: item.name.length === 3 || item.name.length > 4 }"
                v-for="item in tableHeader"
                :key="item.props"
            >
                {{ item.name }}
            </div>
        </div>
        <div class="tr-wrap" v-for="(item, index) in tableData" :key="index">
            <div v-if="type==0" class="tr" :class="{ 'special-tr': hideText }">
                <div class="td" v-for="(ele, idx) in tableHeader" :key="idx + 'id'">
                    <el-icon @click="handleDelete(index)" v-show="idx===0&&isEdit" class="delete-icon" color="#FF2323"><RemoveFilled /></el-icon>
                    <span v-if="!isEdit">{{ item[ele.props] }}</span>
                    <template v-else>
                        <span v-if="ele.name==='执行方式'">人工</span>
                        <el-select remote-show-suffix v-else class="select" v-model="item[ele.props]">
                            <el-option v-for="optionItem in item.list" :key="optionItem.name" :label="optionItem.name" :value="optionItem.name" />
                        </el-select>
                    </template>
                </div>
            </div>
            <div v-else class="tr collapse" :class="{ 'special-tr': hideText }">
                <div class="td" :class="{'collapse-td':ele.name==='执行方式'}" v-for="(ele, idx) in tableHeader" :key="idx + 'id'">
                    <el-icon @click="handleDelete(index)" v-show="idx===0&&isEdit" class="delete-icon" color="#FF2323"><RemoveFilled /></el-icon>
                    <div v-if="!isEdit" :class="{'special-td':idx>1}">
                        <div>{{ item[ele.props]||'测试数据' }}</div>
                        <div class="txt" v-show="idx>1">1111</div>
                    </div>
                    <template v-else>
                        <div :class="{'special-td':idx>1}">
                            <template v-if="ele.name==='执行方式'">
                                <div>人工</div>
                                <div class="txt" v-show="idx>1">无人机</div>
                            </template>
                            <template v-else>
                                <el-select :class="['select',{'ml':idx>1}]" v-model="item[ele.props]">
                                    <el-option v-for="optionItem in item.list" :key="optionItem.name" :label="optionItem.name" :value="optionItem.name" />
                                </el-select>
                                <el-select v-show="idx>1" :class="['select','txt',{'ml':idx>1}]" v-model="item[ele.props]">
                                    <el-option v-for="optionItem in item.list" :key="optionItem.name" :label="optionItem.name" :value="optionItem.name" />
                                </el-select>
                            </template>
                        </div>
                    </template>
                </div>
            </div>
            <div class="box-textarea" v-if="!hideText">
                <el-input
                    :disabled="!isEdit"
                    class="textarea"
                    v-model="textarea"
                    :rows="1"
                    type="textarea"
                    placeholder="这是是用药注意事项的备注，省略1000字"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
    tableData: {
        type: Array,
        defalut: [],
         required:true
    },
    tableHeader: {
        type: Array,
        defalut: [],
        required:true
    },
    hideText: {
        type: Boolean,
        defalut: true,
    },
    isEdit: {
        type: Boolean,
        defalut: true,
    },
    type: {
        type: [String,Number],
        defalut:0,
        required:true
    },
});

const emit = defineEmits(['handleDelete'])
const handleDelete = (index) =>{
    emit('handleDelete',index)
}

const textarea = ref("");
const list = ref([
    {
        name: "营养",
    },
    {
        name: "Action 2",
    },
    {
        name: "Action 3",
    },
]);
</script>

<style lang="scss" scoped>
.table {
    border: 1px solid #444444;
    border-radius: 5px;
    .th,
    .tr {
        display: flex;
        align-items: center;
        color: #727272;
        height: 46px;
        font-size: 14px;
        justify-content: space-around;
        .td {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 25%;
            height: 100%;
            color: #cecece;
        }
    }
    .collapse{
        height: 80px;
        border: 1px solid #444444;
        margin: 12px 8px;
        border-radius: 6px;
        .collapse-td{
            border-left: 1px solid #444444;
            border-right: 1px solid #444444;
        }
    }
    .special-td{
        width: 100%;
        height: 100%;
        div{
            width: 100%;
            height: 50%;
            line-height: 40px;
        }
        .txt{
            border-top: 1px solid #444444;
        }
    }

    .th {
        background: rgba(255, 255, 255, 0.04);
        .width {
            width: 40px;
        }
        .special {
            width: 60px;
        }
    }
    .special-tr {
        .td {
            width: auto;
        }
    }

    .delete-icon{
        margin-right: 4px;
        cursor: pointer;
    }

    .tr-wrap + .tr-wrap {
        border-top: 1px solid #444444;
    }
}
.select {
    width: 50px !important;
    &.ml{
        padding: 0 15px;
    }
    ::v-deep {
        .el-select__wrapper {
            background: transparent;
            padding: 0;
            box-shadow: none;
        }
        .el-select__placeholder,
        .el-select__caret {
            color: #ffd489;
        }
    }
}
.box-textarea {
    border-radius: 4px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    margin: 0 8px 10px 8px;
    .textarea {
        ::v-deep {
            .el-textarea__inner {
                background: transparent;
                box-shadow: none;
                color: #fff;
                padding: 0;
            }
        }
    }
}
</style>