vue模拟el-table演示插槽用法

这篇具有很好参考价值的文章主要介绍了vue模拟el-table演示插槽用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue模拟el-table演示插槽用法

很多人知道插槽分为三种,但是实际到elementui当中为什么这么用,就一脸懵逼,接下来就跟大家聊一聊插槽在elementui中的应用,并且自己写一个类似el-table的组件

vue的slot分为三种::匿名插槽,具名插槽, 作用域插槽,主要作用:让父组件可以向子组件指定位置插入 html 结构,也是一种组件间通信的方式,适用于父组件=>子组件

1、匿名插槽

匿名组件相当于一个占位符,将父组件的数据传入子组件的slot标签内

父组件:

<template>
  <ChildSlot>父组件调用</ChildSlot>
</template>

<script>
import ChildSlot from "@/components/ChildSlot";
export default {
  components:{
    ChildSlot
  }
}
</script>

子组件:

<template>
  <h1>我是子组件</h1>
  <slot></slot>
</template>

<script>
export default {
  name: "ChildSlot"
}
</script>

运行结果如下:

此时父组件中的“父组件调用”这段内容就传递到了子组件,并填入了slot挖的坑当中

vue模拟el-table演示插槽用法

2、具名插槽

具名插槽相当于给插槽添加了一个名字(给插槽加入name属性就是具名插槽)

父组件:

<template>
    <child-slot>
      <template v-slot:username>我是父组件传递的用户姓名</template>
    </child-slot>
    <child-slot>
      <template v-slot:age>我是父组件传递的年龄</template>
    </child-slot>
</template>

<script>
import ChildSlot from "@/components/ChildSlot";
export default {
  components:{
    ChildSlot
  }
}
</script>

子组件:

<template>
  <h1>我是子组件</h1>
  <slot name="username"></slot>
  <slot name="age"></slot>
</template>

<script>
export default {
  name: "ChildSlot"
}
</script>

运行结果如下:

此时父组件中的根据slot的name,将内容填入了slot挖的坑当中,一个萝卜一个坑
vue模拟el-table演示插槽用法

3、作用域插槽

与前两者的不同 slot自定义:name="值" 子组件可向父组件传递信息

父组件:

<template>
    <child-slot>
      <template v-slot="{username}">我是子组件传递的用户姓名:{{username}}</template>
    </child-slot>
</template>

<script>
import ChildSlot from "@/components/ChildSlot";
export default {
  components:{
    ChildSlot
  }
}
</script>

子组件:

<template>
  <h1>我是子组件</h1>
  <slot :username="username"></slot>
</template>

<script>
export default {
  name: "ChildSlot",
  data(){
    return{
        username:'java',
    }
  }
}
</script>

运行结果如下:

通过作用域插槽,我们可以将子组件中的值传入到父组件,在父组件进行数据处理后,填坑到子组件

4、模拟写一个el-table

先看一个el-table的例子,当需要对一行中的某一个单元格的内容进行处理的时候,需要用到slot插槽,例如下面的姓名name的处理

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址">
    </el-table-column>
  </el-table>
</template>

参照el-table,实现我们自己的table组件,讲解下为什么需要用插槽,用了哪些插槽

4.1为了传递table,首先通过匿名插槽,写一个的组件,目的就是模拟下面这三行内容

​ <el-table
​ :data="tableData"
​ style="width: 100%">

<template>
  <div>
      <slot></slot>
  </div>
</template>

<script>
export default {
  name: "MyTable"
}
</script>
4.2实现el-table-column,通过作用域插槽,写我们自己的el-table-column
<template>
  <div>
    <div>
      <!--通过传递label标签,展示表头-->
      <span v-if="label">{{ label }}</span>
    </div>
    <!--获取主页面的data值:$parent.$parent.$data.tableList-->
    <div v-for="(user,index) in $parent.$parent.$data.tableList" :key="index">
      <!--当传递prop属性的时候,就取user用户的数据-->
      <div v-if="prop">{{user[prop]}}</div>
      <!--当不传递prop属性的时候,将用户的数据通过row属性,传递到父组件当中,也就是app.vue-->
      <slot v-else :row="user"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyTableColumn",
  props: {
    prop: {type: String},
    label: {type: String}
  }
}
</script>

4.2调用my-table,my-table-column

我们通过my-table标签,将内容my-table和my-table-column放置到my-table的匿名插槽中,并通过子组件的props属性,接收prop和label。如同elementui一样,如果prop为空,子附件将父组件的user通过作用域插槽传递到父组件,并在父组件进行处理

<template>
  <div>
    <my-table :data="tableList" style="display: flex; flex-direction: row;">
      <my-table-column prop="name" label="姓名"></my-table-column>
      <my-table-column prop="sex" label="性别"></my-table-column>
      <my-table-column label="地址">
        <template v-slot="scope">
          <span style="background-color: deepskyblue">{{scope.row.address}}</span>
        </template>
      </my-table-column>
    </my-table>
  </div>
</template>

<script>
import MyTable from "@/components/MyTable";
import MyTableColumn from "@/components/MyTableColumn";
export default {
  name: 'App',
  components:{
    MyTableColumn,
    MyTable
  },
  data(){
    return{
      tableList:[
        {
          name: 'java大师1',
          sex: '男',
          address: '西藏1'
        },
        {
          name: 'java大师2',
          sex: '男',
          address: '西藏2'
        },
        {
          name: 'java大师3',
          sex: '男',
          address: '西藏3'
        },
        {
          name: 'java大师4',
          sex: '男',
          address: '西藏4'
        }
      ]
    }
  }
}
</script>

展示结果如下:

vue模拟el-table演示插槽用法文章来源地址https://www.toymoban.com/news/detail-464317.html

到了这里,关于vue模拟el-table演示插槽用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 el-table 单选

    解决方式:给每个表格加上唯一key值

    2024年02月11日
    浏览(53)
  • vue el-table实现动态表头

    众所周知,element-ui中有一个表格组件el-table,用于展示多条结构类似的数据。之前遇到过一个需求,要手动控制el-table的表头显示。就是假如table表格一共有10列数据,可以通过设置勾选,决定显示多少列。 为了代码的复用性,将配置页面单独抽成了组件,所以代码中会有组件

    2024年02月12日
    浏览(53)
  • vue+el-table实现展开与折叠

    本文会提到两种实现方法,之前我使用的是第一种,后来加了固定列,发现展开与折叠失效,故而出现了第二种方法。 一、通过class名称获取节点,并对节点进行操作(该方法表格添加固定列会失效) 1.全部展开 2.全部折叠 二、通过el-table中的 toggleRowSelection方法来实现展开与

    2024年02月14日
    浏览(47)
  • vue el-table 多选框回填

    主要代码: 效果: html js

    2024年01月18日
    浏览(48)
  • vue+elementUI el-table实现单选

    2024年02月09日
    浏览(44)
  • 【vue】el-table实现动态添加行和列

    实现思路: 最近遇到一个动态增加行和列的需求,本来拿到需求的时候想用el-table中自带的方法去实现的,但是经过尝试发现不能满足想要实现的需求。没办法只能在el-table的基础上自己写原生。 大概思路如下: 1.首先把table中需要动态增加的行和列分开,分别定义一个数组

    2024年02月11日
    浏览(46)
  • vue + el-table点击表头改变其当前样式

    废话不多说,先看效果: 网上找了一大圈没有符合的,只能自己看着搞: 直接贴代码: 这种写法经使用过程中发现问题,故修改为以下:

    2024年02月13日
    浏览(40)
  • Vue中el-table表格的拖拽排序

    element-ui 表格没有拖拽排序的功能,只能使用sortable.js插件实现拖拽排序,当然也可以应用到其他的组件里面,用法类似,这里只说表格。 实现步骤: 1、安装sortable.js 2、在需要的页面中引入 3、实现表格拖动代码

    2024年02月10日
    浏览(51)
  • Vue+element实现el-table行内编辑并校验

    el-table行内编辑情况情况概要:之前在开发过程中对于element数据的新增,修改,删除。一般直接结合el-form使用。也就是新增的时候点新增然后出来一个弹框,里面嵌套一个表单,然后保存就好了。这次项目中要求所有的新增,修改,删除功能加在表格中,实现行内编辑功能。

    2024年02月15日
    浏览(47)
  • vue3中el-table实现表格合计行

    el-table标签上加属性 show-summary :summary-method=“getSummary” js中添加函数(合计没有额外的附件参数添加) js中添加函数(合计有额外的附件参数添加的情况)

    2024年02月02日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包