像表格一样的表单

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    inline-message
    scroll-to-error
    status-icon
  >
    <el-row class="title">
      <el-col :span="24"><div class="bigTitle">信息化项目预算申报</div></el-col>
    </el-row>
    <el-row class="title">
      <el-col :span="24"><div class="littleTitle">一、基本信息</div></el-col>
    </el-row>
    <div class="content">
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算构成：</div></el-col>

        <el-col :span="20"
          ><div class="rightContent p-2">
            <CommonTable
              :data="tableData"
              :columns="tableColumns"
              :total="total"
              :summaryConfig="false"
              :current-page.sync="page"
              :page-size.sync="pageSize"
              :loading="loading"
              :tableConfig="{ showIndex: true }"
              @selection-change="handleSelectionChange"
            >
              <template #indexColumn>
                <div class="flex items-center justify-center">
                  <el-icon
                    size="20"
                    class="cursor-pointer"
                    color="var(--el-color-primary)"
                    ><CirclePlus
                  /></el-icon>
                </div>
              </template>

              <template #操作="{ row }">
                <div class="h-full flex items-center">
                  <el-space>
                    <el-icon size="16"><Remove /></el-icon>
                    <el-icon size="16"><CopyDocument /></el-icon>
                  </el-space>
                </div>
              </template>
            </CommonTable></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>

        <el-col :span="20"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
    </div>

    <el-row class="title">
      <el-col :span="24"><div class="littleTitle">一、基本信息</div></el-col>
    </el-row>
    <div class="content">
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算构成：</div></el-col>

        <el-col :span="20"
          ><div class="rightContent">
            <CommonTable
              :data="tableData"
              :columns="tableColumns"
              :total="total"
              :summaryConfig="false"
              :current-page.sync="page"
              :page-size.sync="pageSize"
              :loading="loading"
              :tableConfig="{ showIndex: true }"
              @selection-change="handleSelectionChange"
            >
              <template #indexColumn>
                <div class="flex items-center justify-center">
                  <el-icon
                    size="20"
                    class="cursor-pointer"
                    color="var(--el-color-primary)"
                    ><CirclePlus
                  /></el-icon>
                </div>
              </template>

              <template #操作="{ row }">
                <div class="h-full flex items-center">
                  <el-space>
                    <el-icon size="16"><Remove /></el-icon>
                    <el-icon size="16"><CopyDocument /></el-icon>
                  </el-space>
                </div>
              </template>
            </CommonTable></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"
          ><div class="leftLabel">
            <span class="mr-2 text-red-500">*</span> 预算名称：
          </div></el-col
        >

        <el-col :span="20"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
        <el-col :span="4"><div class="leftLabel">预算名称：</div></el-col>
        <el-col :span="8"
          ><div class="rightContent">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" />
            </el-form-item></div
        ></el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script setup>
import CommonTable from "@/components/ComonTable/index.vue";

import { computed, reactive, ref } from "vue";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";
const tableColumns = ref([
  { prop: "date", label: "序号", width: 80, tooltip: true, sortable: true },
  { prop: "name", label: "头像", width: 80 },
  { prop: "state", label: "用户名" },
  { prop: "city", label: "昵称" },
  { prop: "address", label: "手机号", width: 150 },
  { prop: "zip", label: "邮箱", width: 150, tooltip: true },
  { prop: "操作", label: "操作", minWidth: "100", fixed: "right" },
]);
const tableData = ref([
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
]);

const pageSize = ref(10);
const page = ref(1);
const ruleForm = reactive({
  name: "Hello",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  location: "",
  type: [],
  resource: "",
  desc: "",
});
const rules = reactive({
  name: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  location: [
    {
      required: true,
      message: "Please select a location",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
});
</script>

<style lang="scss" scoped>
.bigTitle {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  box-sizing: border-box;
  height: 100%;
  line-height: 40px;
}
.littleTitle {
  font-size: 15px;
  border-top: 0;
  height: 100%;
  line-height: 40px;
  padding-left: 10px;
  font-weight: bold;
}
.el-form {
  border-bottom: 1.5px solid rgb(217, 217, 217);
  .el-row.title {
    border-left: 1.5px solid rgb(217, 217, 217);
    border-right: 1.5px solid rgb(217, 217, 217);
  }
}

.el-row {
  min-height: 40px;
  box-sizing: border-box;

  .el-col {
    border: 1.5px solid rgb(217, 217, 217);
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
  }
}
.content {
  border-left: 1.5px solid rgb(217, 217, 217);

  .el-col {
    border-right: 1.5px solid rgb(217, 217, 217);
  }
}
.leftLabel {
  height: 100%;
  background-color: #edf6ff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}
.rightContent {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.rightContent {
  :deep() {
    .el-form-item {
      margin-bottom: 0;
      .el-input {
        height: 40px;
      }
      .el-select {
        height: 40px;
      }
    }
    .el-select__wrapper {
      height: 100%;
    }
    .el-switch,
    .el-checkbox-group,
    .el-radio-group {
      margin-left: 11px;
    }
    .el-checkbox-group {
      display: flex;
      flex-wrap: wrap;
    }
    .el-input__wrapper,
    .el-select__wrapper {
      box-shadow: unset;
      &:hover,
      &:focus {
        box-shadow: unset;
      }
    }

    .el-textarea__inner {
      box-shadow: unset;

      &:focus {
        box-shadow: unset;
      }
    }
  }
}
</style>