Vue 加上slot-scope 按钮就不显示了


<div id="app">
            <div class="demo-image" v-for="phs in photoList">
                <div class="block">
                    <el-image
                            style="width: 500px; height: 500px"
                            :src="phs.purl"
                            fit=scale-down>
                    </el-image>
                </div>
                <template slot-scope="scope">
                    <el-button type="text" @click="deletePhoto(scope.row.pid)" icon="el-icon-delete" circle>删除</el-button>
                </template>
            </div>
</div>

img

<div id="app">
            <div class="demo-image" v-for="phs in photoList">
                <div class="block">
                    <el-image
                            style="width: 500px; height: 500px"
                            :src="phs.purl"
                            fit=scale-down>
                    </el-image>
                </div>
                <template>
                    <el-button type="text" @click="deletePhoto(scope.row.pid)" icon="el-icon-delete" circle>删除</el-button>
                </template>
            </div>
</div>

img

去掉slot-scope就显示按钮了

看看版本,2.6.0以后版本弃用slot和slot-scope,改用v-slot了
你也不用插槽,这样写

<div id="app">
            <div class="demo-image" v-for="phs in photoList">
                <div class="block">
                    <el-image
                            style="width: 500px; height: 500px"
                            :src="phs.purl"
                            fit=scale-down>
                    </el-image>
                </div>
                <template>
                    <el-button type="text" @click="deletePhoto(phs.pid)" icon="el-icon-delete" circle>删除</el-button>
                </template>
            </div>
</div>