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

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

但是由於element中的元件自動換行了，所以出來的結果是這樣的：

    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">
        <el-input v-model="num1" placeholder="請輸入數字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="請輸入數字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>
 

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

如果我們看過原始碼，知道可以通過插槽的方式來實現：

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

噗~

有話好好說，別打人！

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

雖然有點不太成功，但是記得曾經看過表單是有行內表單的，能夠把各個元件放在一起

經過檢視原始碼，發現其實這個屬性也就是綁定了一個樣式而已，那麼，我們手動做起來的時候，是不是也可以從樣式的方面來考慮呢？

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

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

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

經過這樣一番折騰，效果總算像個樣子了，但是為了更好看，後續還需要努力研究一下才行。