zoukankan      html  css  js  c++  java
  • `elementui`表格实现无限滚动

    main.js添加自定义指令:

    Vue.directive('loadmore', {
      bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function() {
          let sign = 10
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        })
      }
    })
    

    组件代码如下:

    <template>
      <div>
        <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          v-loadmore="loadMore"
          style=" 100%;height: 500px;"
           max-height="500px">
          <el-table-column
            label="发布时间"
            sortable
            prop="course_date">
          </el-table-column>
          <el-table-column
            label="课程名称"
            sortable
            prop="course_name">
          </el-table-column>
          <el-table-column
            label="课程状态"
            sortable
            prop="course_type">
          </el-table-column>
          <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">查看学生信息</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除课程</el-button>
            </template>
          </el-table-column>
        </el-table>
        <p v-if="nomore">没有更多数据了</p>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          nomore: false,
          currentPage: 10,
          tableData: [{
            course_date: '2016-05-02',
            course_name: '语文',
            course_type: '已结束'
          }, {
            course_date: '2016-05-02',
            course_name: '数学',
            course_type: '进行中'
          }, {
            course_date: '2016-05-02',
            course_name: '计算机',
            course_type: '进行中'
          }, {
            course_date: '2016-05-02',
            course_name: '英语',
            course_type: '未发布'
          }, {
            course_date: '2016-05-02',
            course_name: '数学',
            course_type: '进行中'
          }, {
            course_date: '2016-05-02',
            course_name: '计算机',
            course_type: '进行中'
          }, {
            course_date: '2016-05-02',
            course_name: '英语',
            course_type: '未发布'
          }, {
            course_date: '2016-05-02',
            course_name: '数学',
            course_type: '进行中'
          }, {
            course_date: '2016-05-02',
            course_name: '计算机',
            course_type: '进行中'
          }, {
            course_date: '2016-05-02',
            course_name: '英语',
            course_type: '未发布'
          }],
          search: ''
        }
      },
      mounted () {
      },
      methods: {
        loadMore () {
          if(this.currentPage >= 20){
            this.nomore = true
          }else{
            this.currentPage++
          this.tableData.push({
            course_date: '2016-11-02',
            course_name: 'lis',
            course_type: '未发布'
          })
          }
        },
        handleEdit(index, row) {
          alert(row.course_name)
          this.tableData.push({
            course_date: '2016-11-02',
            course_name: 'lis',
            course_type: '未发布'
          })
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        }
      }
    }
    </script>
    
    

    参考链接:https://blog.csdn.net/weixin_43953710/article/details/88846252

    梦还远,路还长!
  • 相关阅读:
    linux初学者-正则表达式
    linux初学者-文件管理篇
    linux初学者-常用基本命令篇
    初学者的linux
    java中接口的定义和接口的实现
    深入理解Java的接口和抽象类
    在pom.xml中的dependencies点击add怎么没有搜索到相关jar包
    json对象(对象+数组)
    poi导出模板(我的备份)
    js对象和数组的定义
  • 原文地址:https://www.cnblogs.com/qujialin/p/12268755.html
Copyright © 2011-2022 走看看