Vue中的 slot插槽的簡單應用——input中巢狀按鈕的效果
阿新 • • 發佈:2018-11-08
場景:
需要一種類似於把按鈕放在input最右邊的效果
解決辦法:
1,發現在Vue中怎麼巢狀都出不了效果,網上搜到的一種html寫法(但是和Vue中的el-table-column有些影響):
<form role="form"> <div class="input-group"> <span class="input-group-addon"> <a href="#" class="btn-block">button</a> </span> <input type="text" class="form-control"> </div> </form>
2,在Vue中,可以使用 slot-scope 做出類似這樣的效果(而且很美觀),還可以巢狀一些其他功能:
程式碼如下:
<el-table-column prop="filePath" label="圖片連結" min-width="320"> <template slot-scope="scope"> <el-input placeholder="請輸入圖片連結" v-model="scope.row.filePath" clearable> <template slot="append"> <MutiUpload v-show="sectionShow" code="sectionTest" description="測試圖片" v-model="sectionList"> </MutiUpload> </template> </el-input> </template> </el-table-column>
備註:
-
prepend是在左邊 append是在右邊