vue学习之slot 解决element-ui在table中插入链接地址

今天在element-ui的学习中要在表格中写入一个链接


    {{link}}

结果什么都没有(后面的链接)

vue学习之slot 解决element-ui在table中插入链接地址_第1张图片

官方文档是有介绍

通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,用法参考 demo。

要写成这样


    

 效果就是前图的前面那个链接。

为此详细地学了一下Vue的slot

slot就是一个插槽,将原本不属于这个模板的的自定义的东西插入在这个插槽中

然后在调用时加入插槽内容

结果

在做测试的时候还搞了一个低级的错误

错误解决了,之后的

插槽内容--就是把想插入的东西写在里面,万物皆可写入

编译作用域--只能使用父模板中的数据

后备内容(个人认为翻译成默认内容更好理解)--就是啥也不写的时候显示什么

具名插槽(个人认为翻译成命名插槽更好理解)--多个插槽给个名字,按名字放好

作用域插槽--这个就是解决使用子模板的数据问题了

这些内容就很好理解了

其中难点和重点以及element-ui中插入链接都是作用域插槽中的内容,且slot-scope已经被废弃,取而代之的是v-slot

你可能感兴趣的:(JavaScript学习,vue)