Javascript

vue中作用域插槽的使用

本文主要是介绍vue中作用域插槽的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

作用域插槽的使用

    <!--卡片视图-->
    <el-card>
      <el-table :data="rightsList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限等级" prop="level">
            <template v-slot:="scope">
              <el-tag v-if="scope.row.level === '0'">一级权限</el-tag>
              <el-tag type="success" v-else-if="scope.row.level === '1'">二级权限</el-tag>
              <el-tag type="warning" v-else>三级权限</el-tag>
            </template>
        </el-table-column>
      </el-table>
    </el-card>
这篇关于vue中作用域插槽的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!