Vue.js中，插槽（slot）妙用

最近接手了vue项目，发现插槽slot真是个妙用精灵般的存在~

1. 首先它，可以实现在整个表格的每一行，新开一列，放一个按钮，做折叠收起的效果，当然整个折叠需要和折叠组件Collapse 来搭配，详情使用请看我的文章：https://blog.csdn.net/Turboyiyi/article/details/142054967?spm=1001.2014.3001.5501
2. 第二个应用场景，比如想实现下图效果：就可以使用slot实现了，详细代码已放在下面

3.  <el-form-item :label="$t('kaoyan.text')" prop="text_timeout">
         <el-input v-model.number="kaoyan.text_timeout" style="width: 100px">
               <i slot="suffix">ms</i>
          </el-input>
     </el-form-item>

   ---

   当然，也会出现让它在左侧显示，那这时将属性值更改为slot="prefix"，就可以实现了<span slot="prefix">Timeout: </span>

 之前对slot不太熟悉，看见了官方的解读后，大白话讲slot就是挖坑种树，在哪用就在哪里挖坑哈哈哈哈，觉得vue比react要好用多了，下面粘贴一下官方的讲解：

在Vue.js中，插槽（slot）是一种用于组件内容分发的机制。插槽允许你在组件模板中预留一个位置，以便在使用该组件时可以插入自定义的内容。

suffix插槽是Element UI库中的一个特性，它允许你在输入框的右侧添加额外的内容。在这个例子中，<i slot="suffix">ms</i>表示将一个内联元素（<i>标签）放置在名为"suffix"的插槽中。

以后发现slot的新使用，后面如果发现好的玩儿法，将再次更新，敬请期待叭~