Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問(wèn)題

更新時(shí)間：2023年02月06日 10:31:12 作者：瀟I灑

這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue保持element組件同行，設(shè)置組件不自動(dòng)換行

因?yàn)閂ue是響應(yīng)式的，所以就想做個(gè)計(jì)算器來(lái)用下，樣式就使用了element。

想要做成的效果是這樣一個(gè)加減乘除

X+Y=M22+33=55

但是由于element中的組件自動(dòng)換行了，所以出來(lái)的結(jié)果是這樣的：

    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-input v-model="num1" placeholder="請(qǐng)輸入數(shù)字1">
        </el-input>
        <el-select slot="prepend" v-model="select" placeholder="請(qǐng)選擇">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="num2" placeholder="請(qǐng)輸入數(shù)字2">
        </el-input>
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">
        <el-button>=</el-button>
        {{ getNum() }}
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

這樣的樣式不僅分行難看，輸入框又太過(guò)長(zhǎng)了，那么要怎么做成可以讓左邊的三個(gè)組件放在同一行呢？

如果我們看過(guò)源碼，知道可以通過(guò)插槽的方式來(lái)實(shí)現(xiàn)：

    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-input v-model="num2" placeholder="請(qǐng)輸入數(shù)字2">
          <!--num2的前置插槽-->
          <el-input slot="prepend" v-model="num1" placeholder="請(qǐng)輸入數(shù)字1">
            <!--num1的后置插槽-->
            <el-select slot="append" v-model="select" placeholder="請(qǐng)選擇">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-input>
        </el-input>
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">
        <el-button>=</el-button>
        {{ getNum() }}
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

噗~

有話(huà)好好說(shuō)，別打人！

雖然難看是難看了一點(diǎn)，至少說(shuō)需求達(dá)到了，結(jié)果也是正確的嘛！

雖然有點(diǎn)不太成功，但是記得曾經(jīng)看過(guò)表單是有行內(nèi)表單的，能夠把各個(gè)組件放在一起

經(jīng)過(guò)查看源碼，發(fā)現(xiàn)其實(shí)這個(gè)屬性也就是綁定了一個(gè)樣式而已，那么，我們手動(dòng)做起來(lái)的時(shí)候，是不是也可以從樣式的方面來(lái)考慮呢？

至于樣式之類(lèi)的，我不是很熟悉，但相信是一個(gè)解決之道。

為了盡快達(dá)到效果，我使用了表格的形式，就是在這幾個(gè)之間加上<td>：

    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple" style="float: left">
          <td>
            <el-input v-model="num1" placeholder="請(qǐng)輸入數(shù)字1">
            </el-input>
          </td>
        <td>
          <el-select v-model="select" placeholder="請(qǐng)選擇">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </td>
          <td>
            <el-input v-model="num2" placeholder="請(qǐng)輸入數(shù)字2">
            </el-input>
          </td>
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">
        <el-button>=</el-button>
        {{ getNum() }}
      </div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>