vue2+element-ui,table监听是否滚到到底部

你可以使用element-ui中的el-table组件，以及原生的DOM API来检测表格是否滚动到了底部。具体实现方式如下：

1. 给el-table组件添加一个ref属性，例如：ref="myTable"。

2. 在组件中使用watch监听el-table的滚动事件，可以使用@scroll.native属性来绑定滚动事件。

3. 在滚动事件回调函数中，使用原生DOM API来获取当前表格的滚动位置以及表格内容的高度，判断是否滚动到了底部。

代码示例：

<template>
  <el-table ref="myTable" @scroll.native="handleTableScroll">
    ...
  </el-table>
</template>

<script>
export default {
  methods: {
    handleTableScroll() {
      const table = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper')
      if (table.scrollTop + table.clientHeight >= table.scrollHeight) {
        // 滚动到了底部
        console.log('到达底部了')
      }
    }
  }
}
</script>

注意：el-table组件的实现方式可能会随着版本的更新而有所改变，以上代码仅供参考。

相关问题

vue页面回显数据_vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据。...

对于多选的Table数据回显，可以使用Vue中的v-model来实现。你可以在data中定义一个选中的数组，然后在Table中使用v-model绑定这个数组，这样就可以实现多选数据回显了。

例如：

<template>
  <div>
    <el-table
      :data="tableData"
      :row-key="row => row.id"
      v-loading="loading"
      v-model="selectedItems">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [
        { id: 1, name: 'John', age: 18 },
        { id: 2, name: 'Jane', age: 22 },
        { id: 3, name: 'Tom', age: 20 },
      ],
      selectedItems: [],
    };
  },
};
</script>

对于多页选择数据回显，可以在Table中使用selection-change事件来监听选中数据的变化，然后在翻页时将选中数据保存在一个数组中。例如：

<template>
  <div>
    <el-table
      :data="tableData"
      :row-key="row => row.id"
      v-loading="loading"
      v-model="selectedItems"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      selectedItems: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectionList: [],
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectionList[this.currentPage] = selection;
    },
    handlePageChange(page) {
      this.currentPage = page;
      if (!this.selectionList[page]) {
        this.selectionList[page] = [];
      }
      this.selectedItems = this.selectionList[page];
    },
  },
};
</script>

这样就可以实现多页选择数据回显，并且分页记录保存选中的数据了。

vue+element-ui树形表格+复选框（实现复选框的各种效果）

Vue.js 结合 Element-UI 的 Tree 表格组件可以创建功能丰富的动态数据列表，其中包括支持复选框。在 Element-UI 的 Table 中，通过`prop`和`scoped slot`可以轻松添加列级别的交互，如复选框。以下是基本步骤：

1. **引入组件**：
首先，在 Vue 项目中安装 Element-UI 和相关的依赖，然后在组件中导入 `el-table`, `el-checkbox-group`, 和 `el-checkbox`。

<template>
  <div>
    <el-table :data="treeData" ref="table">
      <!-- ... -->
    </el-table>
    <el-checkbox-group v-model="selectedIds">
      <el-checkbox v-for="item in checkedKeys" :key="item" :label="item">{{ item }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

2. **配置表结构**：
定义表头和行数据结构，其中包含需要显示的字段和复选框的属性。

export default {
  data() {
    return {
      treeData: [
        // 树形数据示例
        { id: 1, name: '父节点1', children: [2, 3] },
        { id: 2, name: '子节点1' },
        { id: 3, name: '子节点2' }
      ],
      selectedIds: [], // 用于存储选中的节点ID
      checkedKeys: [] // 存储选中项的数组，与selectedIds同步
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedIds = val;
      this.checkedKeys = val.map(item => item.id); // 将选择的节点ID转换为数组
    }
  }
};

3. **处理勾选事件**：
当用户操作复选框时，可以监听`selection-change`事件，更新数据状态和可能的操作（如提交、删除等）。

// 在methods中添加handleSelectionChange方法
methods: {
  handleSelectionChange(val) {
    //...
    // 如果有其他业务逻辑，比如保存当前选择的数据
    if (this.saveSelectedItems) {
      this.saveSelectedItems(this.selectedIds);
    }
  }
}