Vue中的 slot插槽的简单应用——input中嵌套按钮的效果

场景：

需要一种类似于把按钮放在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>

---

备注：

1. prepend是在左边 
   append是在右边