agriculture-one-map/src/views/addFarm/components/table.vue

<template>
    <div class="table">
        <div class="header">
            <div class="header-item">
                <span>使用功效：</span>
                <el-select class="select" v-model="value">
                    <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
            </div>
            <div class="header-item">
                <span>肥药名称：</span>
                <el-select class="select" v-model="value">
                    <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
            </div>
        </div>
        <div class="body">
            <div class="th">
                <div class="td"></div>
                <div class="td">配比<span>(药剂：兑水量)</span></div>
                <div class="td">施用方式</div>
                <div class="td">单亩用量</div>
            </div>
            <div class="tr">
                <div class="td">人工</div>
                <div class="td">
                    <el-select class="select" v-model="value">
                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </div>
                <div class="td">
                    <el-select class="select" v-model="value">
                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </div>
                <div class="td">
                    <el-select class="select" v-model="value">
                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </div>
            </div>
            <div class="tr">
                <div class="td">无人机</div>
                <div class="td">
                    <el-select class="select" v-model="value">
                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </div>
                <div class="td">
                    <el-select class="select" v-model="value">
                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </div>
                <div class="td">
                    <el-select class="select" v-model="value">
                        <el-option v-for="item in list" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";

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

<style lang="scss" scoped>
.table {
    .header {
        display: flex;
        justify-content: center;
        .header-item {
            display: flex;
            align-items: center;
            color: #727272;
        }
        .header-item + .header-item {
            margin-left: 36px;
        }
    }
    .body {
        border: 1px solid #444444;
        border-radius: 5px;
        .th{
            border-bottom: 1px solid #444444;
        }
        .th,.tr{
            display: flex;
            align-items: center;
            color: #727272;
            height: 46px;
            font-size: 16px;
            .td{
                text-align: center;
                flex: 1;
                span{
                    font-size: 11px;
                    display: inline-block;
                }
            }
            .td + .td{
                border-left: 1px solid #444444;
            }
        }
        .tr + .tr{
            border-top: 1px solid #444444;
        }
    }
    .select {
        width: 50px;
        ::v-deep {
            .el-select__wrapper {
                background: transparent;
                padding: 0;
                box-shadow: none;
            }
            .el-select__placeholder,
            .el-select__caret {
                color: #ffd489;
            }
        }
    }
}
</style>