一个a-form-item下放多个标签怎么不换行

2022-08-18  本文已影响0人  _信仰zmh

设置前面标签的宽度,这样后面标签就不会换行了

 style="width: calc(100% - 100px);"

示例:

 <a-row>
        <a-col :span="24">
          <a-form-item
            label="大盘实例地址(PC端)"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 18 }"
          >
          <!-- addonBefore="https://view.baocloud.cn/public/views/dashboard.html?dashboardName=" -->
          <a-input
            addonBefore="https://view.baocloud.cn/dashboard/db/"
            addonAfter="?orgId=88"
            class="testinput"
            style="width: calc(100% - 100px);"
            @change="change"
            v-decorator="[
              'dashboardName',
              {
                rules: [{ required: !tempInfo.dashboardNameMobile, message: '大盘实例地址PC或移动端至少填写一个!' }],
              },
            ]"
          />
          <a-icon type="link" @click="jump(1)" style='cursor: pointer;color: #4888e8;'/>
        </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="大盘实例地址(移动端)"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 18 }"
          >
          <!-- addonBefore="https://view.baocloud.cn/public/views/dashboard.html?dashboardName=" -->
          <a-input
            addonBefore="https://view.baocloud.cn/dashboard/db/"
            addonAfter="?orgId=88"
            class="testinput"
          
            @change="change"
            v-decorator="[
              'dashboardNameMobile',
              {
                rules: [{ required: !tempInfo.dashboardName, message: '大盘实例地址PC或移动端至少填写一个!' }],
              },
            ]"
          />
          <a-icon type="link" @click="jump(2)" style='cursor: pointer;color: #4888e8;'/>
          </a-form-item>
        </a-col>
      </a-row>
Snipaste_2022-08-18_10-02-38.png
上一篇 下一篇

猜你喜欢

热点阅读