Vue項目保持element組件同行,設(shè)置組件不自動換行問題

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

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

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

因為Vue是響應(yīng)式的，所以就想做個計算器來用下，樣式就使用了element。

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

X+Y=M22+33=55

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

    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-input v-model="num1" placeholder="請輸入數(shù)字1">
        </el-input>
        <el-select slot="prepend" v-model="select" placeholder="請選擇">
          <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="請輸入數(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>

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

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

    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-input v-model="num2" placeholder="請輸入數(shù)字2">
          <!--num2的前置插槽-->
          <el-input slot="prepend" v-model="num1" placeholder="請輸入數(shù)字1">
            <!--num1的后置插槽-->
            <el-select slot="append" v-model="select" placeholder="請選擇">
              <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>

噗~

有話好好說，別打人！

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

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

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

至于樣式之類的，我不是很熟悉，但相信是一個解決之道。

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

    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple" style="float: left">
          <td>
            <el-input v-model="num1" placeholder="請輸入數(shù)字1">
            </el-input>
          </td>
        <td>
          <el-select v-model="select" placeholder="請選擇">
            <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="請輸入數(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>