vue中插槽的使用

63 阅读 0 评论 42 点赞

我是靠谱客的博主淡淡泥猴桃，最近开发中收集的这篇文章主要介绍vue中插槽的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.插槽和element ui的使用

1.1.插槽和el-button的使用

 <template slot-scope="scope">
                  <el-button type="text" size="small" @click="getDuPan1(scope.row)">跨部门调动</el-button>
                  <el-button type="text" size="small" @click="modifyWork(scope.row)">修改岗位</el-button>
                  <el-button type="text" size="small" @click="deletePeople(scope.row)">删除</el-button>
 </template>

在template中,使用slot-scope=“scope”,然后在@click绑定事件中通过(scope.row)来接受一项中所有的数据
在methods中，创建一个方法

modifyWork(item) {
      this.getAdministrativePost()
      // 调用接口
      this.dialogVisible4 = true
      // 打开对话框
      console.log('1434', item)
      this.currentObj2 = item
      // 将数据存储在这个对象中
    },

这个方法要有一个参数用来接受数据。

1.2.插槽和分页组件的使用

分页组件很多的文字都是固定写好的
在这里插入图片描述

我们要写成这样子
在这里插入图片描述
这时候就要用到插槽。

 <el-pagination
              small
              layout="sizes, prev, pager, next, total, slot"
              style="color: #5077AA;"
              :page-sizes="paginationData.pageSizes"
              :page-size="paginationData.pageSize"
              :current-page="paginationData.currentPage"
              :total="paginationData.total"
              :hide-on-single-page="true"
              @current-change="changePage"
              @size-change="changeSize"
            >
              <template>
                <span class="jumpPage">
                  <span>，前往</span>
                  <el-input v-model="paginationData.jumpPage" />
                  <span class="jumpBtn" @click="jumpPage">跳转</span>
                </span>
              </template>
            </el-pagination>

layout是组件布局，子组件名用逗号分隔，根据layout="sizes, prev, pager, next, total, slot"排序的方式进行布局的，如果使用了插槽就要加上slot.
我在data中定义了一个对象用来存储相应的数据

paginationData: {
        pageSize: 10,
        // 默认显示的数量
        pageSizes: [10, 20, 30, 40, 50],
        // 根据调整一个页面显示多少条数
        currentPage: 1,
        // 默认当前页数
        total: 0,
        // 总数
        jumpPage: ''
        // 跳转输入的树
      },

:hide-on-single-page="true"只有一页时是否隐藏
@current-change 是currentPage 改变时会触发
@size-change 是pageSize 改变时会触发

使用插槽，直接在组件之间创建一个template，然后，根据设计稿进行布局

分页是一般在详情页列表使用的，所以会跟获取详情页内容的接口一起使用

// 获取部门下的人员信息
    getDepartmentPeople() {
      let params = {
        departmentId: this.departmentID,
        //部门id
        name: this.searchForm.name,
        // 这个是搜索功能，根据名字进行传参查找
        account: this.searchForm.account,
        // 这个是搜索功能，根据账号进行传参查找
        page: this.paginationData.currentPage,
        // 这个是第几页
        rows: this.paginationData.pageSize
        // 一页有几条
      }
      getDepartmentPeople(params).then(res => {
        this.paginationData.total = res.data.total
        // 数量总数
        console.log('this.paginationData.total部门下', res.data.total)
        // 内容保存在这个素组
        this.tableList = res.data.rows.map(function(item) {
          return item
        })
        console.log('经过条件', this.tableList)
      })
    },

// 分页
    isNumber(value) {
      let patrn = /^(-)?d+(.d+)?$/
      if (patrn.exec(value) == null || value == '') {
        return false
      } else {
        return true
      }
    },
    // 输入页面进行跳转
    jumpPage() {
      if (!this.paginationData.jumpPage) {
        this.$message({
          message: '请输入跳转页数',
          type: 'warning'
        })
      } else if (!this.isNumber(this.paginationData.jumpPage)) {
        this.$message({
          message: '请输入数字',
          type: 'warning'
        })
      } else {
        this.paginationData.currentPage = Number(this.paginationData.jumpPage)
        this.changePage(this.paginationData.currentPage)
        // 都验证成功，就将输入的值，调用改变页数函数进行跳转
      }
      this.paginationData.jumpPage = ''
      console.log(this.paginationData.jumpPage)
    },
    changeSize(size) {
      console.log(size)
      this.paginationData.pageSize = size
      this.getDepartmentPeople()
    },
    changePage(page) {
      this.paginationData.currentPage = page
      this.getDepartmentPeople()
    },
    initPaginationData() {
      this.paginationData = { // 关于分页的数据
        pageSize: 10, // 每页条数
        pageSizes: [10, 20, 30, 40, 50, 60], // 每页条数可选列表
        currentPage: 1, // 当前页数
        total: 0, // 总数
        jumpPage: ''
      }
    },

1.3.插槽与table组件的使用

 <el-table stripe :data="tableList" border style="width: 100%;" :height="formHeight">
              <el-table-column prop="id" label="序号" width="70%">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="account" label="登录账号" />
              <el-table-column prop="roleName" label="岗位">
                <template slot-scope="scope">
                  <span>{{ scope.row.roleName ? scope.row.roleName : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime ? scope.row.createTime : '-' }}</span>
                </template>
              </el-table-column>
</el-table>

在el-table-column和/el-table-column里面使用插槽
可以使用前端的排序

<template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
</template>

也用来判断有值的时候输出值，无值的时候用其他东西代替

 <el-table-column prop="roleName" label="岗位">
                <template slot-scope="scope">
                  <span>{{ scope.row.roleName ? scope.row.roleName : '-' }}</span>
                </template>
</el-table-column>