一最安 2021-07-23 20:20 采纳率: 84.4%
浏览 666
已结题

vue表单的label-col和wrapper-col使用有问题?

img
请问怎么使项目成员标签与项目名称等第一列标签对齐,使项目成员选择器的输入框占满行内剩余空间
img


<template>
  <div id="layout-inner">

    <a-breadcrumb style="margin:0;margin-top:10px;margin-left:16px;text-align: left">
      <a-divider type="vertical" style="background-color: #FF944B;width: 3px;border-radius: 8px"/>
      <a-breadcrumb-item>项目管理</a-breadcrumb-item>
      <a-breadcrumb-item>新增项目</a-breadcrumb-item>

    </a-breadcrumb>

    <a-layout-content
        :style="{ margin: '13px 16px', padding: '24px', background: '#fff', minHeight: '520px' }"
    >
      <div id="content">

         <span class="InfoTitle">
              基本信息
         </span>





        <a-form-model  ref="projectForm"
                       :model="projectForm.form"
                       :style="{marginTop:'10px'}"
                       :label-col="layout.labelCol"
                       :wrapper-col="layout.wrapperCol"
        >
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="项目名称" ref="projectName" prop="projectName" class="formItem">

                <a-input v-model="projectForm.form.projectName" type="text">
                </a-input>
              </a-form-model-item>

            </a-col>
            <a-col :span="8">
              <a-form-model-item label="比赛名称" ref="competition" prop="competition" class="formItem">

                <a-input v-model="projectForm.form.competiton" type="text">
                </a-input>
              </a-form-model-item>

            </a-col>

            <a-col :span="8">

              <a-form-model-item label="项目类型" ref="projectType" prop="projectType" class="formItem">
                <a-select v-model="projectForm.form.projectType"  :style="{minWidth:'100px'}">
                  <a-select-option value="0">
                    开发类
                  </a-select-option>
                  <a-select-option value="1">
                    算法类
                  </a-select-option>

                  <a-select-option value="2">
                    其他
                  </a-select-option>
                </a-select>
              </a-form-model-item>

            </a-col>


          </a-row>

          <a-row>
            <a-col :span="8">
              <a-form-model-item label="负责人" ref="projectLeader" prop="projectLeader" class="formItem">

                <a-input v-model="projectForm.form.projectLeader" type="text">
                </a-input>
              </a-form-model-item>

            </a-col>
            <a-col :span="8">
              <a-form-model-item label="负责人联系方式" ref="leaderPhone" prop="leaderPhone" class="formItem">

                <a-input v-model="projectForm.form.leaderPhone" type="text">
                </a-input>
              </a-form-model-item>

            </a-col>

            <a-col :span="8">

              <a-form-model-item label="负责人邮箱" ref="leaderEmail" prop="leaderEmail" class="formItem">
                <a-input v-model="projectForm.form.leaderEmail" type="text">
                </a-input>
              </a-form-model-item>

            </a-col>


          </a-row>

          <a-row>
            <a-col :span="8">
              <a-form-model-item label="开始日期" ref="startDate" prop="startDate" class="formItem">
              <a-date-picker @change="onChange" />
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="截止日期" ref="endDate" prop="endDate" class="formItem" >
                <a-date-picker @change="onChange" />
              </a-form-model-item>
            </a-col>

          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item label="项目成员" ref="endDate" prop="endDate" class="formItem" :label-col="{span:'3'}">
            <a-select
                mode="multiple"
                :size="size"
                placeholder="Please select"
                :default-value="['a1', 'b2']"
                style="width: 200px"
                @change="handleChange"
                @popupScroll="popupScroll"
                :wrapper-col="{span:'21'}"
            >
              <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                {{ (i + 9).toString(36) + i }}
              </a-select-option>
            </a-select>
              </a-form-model-item>
            </a-col>

          </a-row>










        </a-form-model>
      </div>
    </a-layout-content>
  </div>
</template>

<script>
export default {
name: "newProject",
  data(){
  return{
    size: 'default',
    projectForm:{
      form:{
        projectName:'w3w',
        projectLeader:'',
        competiton:'',
        leaderPhone:'',
        leaderEmail:'',
        projectType:undefined,
        startDate:'',
        endDate:'',



      },
      rules:{

      }

    },
    layout: {
      labelCol: { span: 8 },
      wrapperCol: { span: 15},
    },
  }
  },
  methods:{
    handleChange(value) {
      console.log(`Selected: ${value}`);
    },
    popupScroll() {
      console.log('popupScroll');
    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
  }
}
</script>

<style scoped>
span.InfoTitle{
  font-size: 18px;
  font-weight: bold;
  border-bottom: skyblue 2px solid;

}
</style>


  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 7月31日
    • 创建了问题 7月23日

    悬赏问题

    • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
    • ¥15 错误 LNK2001 无法解析的外部符号
    • ¥50 安装pyaudiokits失败
    • ¥15 计组这些题应该咋做呀
    • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
    • ¥15 让node服务器有自动加载文件的功能
    • ¥15 jmeter脚本回放有的是对的有的是错的
    • ¥15 r语言蛋白组学相关问题
    • ¥15 Python时间序列如何拟合疏系数模型
    • ¥15 求学软件的前人们指明方向🥺