关于slot-scope已经废弃的问题

Jay丶萧邦2023-08-27 4:06

说起来啊，这个问题啊，我之前一直没关注，还是webstorm给我的警告。

因为使用了element-ui的组件库，所以在使用组件的时候往往就cv大法了，直到今天用webstorm写代码是，提示了如下的错误

我这一看，这不行啊，赶紧去查文档。API --- Vue.js

确实写了这api已经是废弃了，那就按它的说法，我们去使用v-slot,至于关于v-slot怎么用,这里就免了吧，毕竟谁还没用过插槽。。。

第一种改法：

javascript 复制代码

        <el-table-column label="第一种日期">
            <template v-slot:default="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
        </el-table-column>

第二种改法：

javascript 复制代码

        <el-table-column label="第二种日期">
            <template v-slot="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
        </el-table-column>

第三种改法：还可以用解构

javascript 复制代码

        <el-table-column label="第三种日期">
            <template v-slot="{row}">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ row.date }}</span>
            </template>
        </el-table-column>

页面展示