el-page-header

el-page-header 是饿了么 UI 库中的一个组件。它通常用于页面的标题栏，可以展示页面的标题和副标题，并提供了一些常用的操作按钮。

el-page-header 组件的使用非常简单，只需要在页面中引入对应的组件，然后在模板中使用标签进行调用。同时，我们还可以使用一些属性来配置标题、副标题和操作按钮的显示和样式，以满足实际需求。

利用 el-page-header 组件，我们可以轻松地创建具有统一风格的页面标题栏，提升用户的使用体验。在页面中添加一个精美的标题栏，不仅可以提高页面的美观度，还可以方便用户进行相关操作，比如返回上一级页面、刷新当前页面等等。

总的来说，el-page-header 是一个非常实用的 UI 组件，它能够简化我们在项目中创建页面标题栏的开发工作，提供一致的设计风格，并且可以灵活地配置各种属性来满足不同的需求。通过合理使用 el-page-header，我们可以提高项目的稳定性和效率，为用户提供更好的使用体验。

相关问题

vue3 el-table滚动加载

以下是使用Vue3实现el-table滚动加载的代码示例：

<template>
  <el-table :data="tableData" :show-header="false" row-class-name="table-row-class" height="500" ref="table">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const tableData = ref([])
    const pageNo = ref(1)
    const pageSize = ref(10)

    const fetchData = async () => {
      // 模拟异步请求数据
      const res = await fetch(`https://api.example.com/data?pageNo=${pageNo.value}&pageSize=${pageSize.value}`)
      const data = await res.json()
      tableData.value = [...tableData.value, ...data.list]
    }

    const handleScroll = () => {
      const tableEl = document.querySelector('.el-table__body-wrapper')
      const { scrollTop, scrollHeight, clientHeight } = tableEl
      if (scrollTop + clientHeight >= scrollHeight) {
        pageNo.value++
        fetchData()
      }
    }

    onMounted(() => {
      fetchData()
      document.querySelector('.el-table__body-wrapper').addEventListener('scroll', handleScroll)
    })

    return {
      tableData
    }
  }
}

el-table 表格分页且可以拖拽

对于 el-table 表格分页且可以拖拽的功能，你可以使用 Element UI 提供的 el-pagination 分页组件和 el-table-column 的 sortable 属性来实现。以下是一个示例代码：

<template>
  <el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    :row-key="row => row.id"
    :header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#333' }"
    style="width: 100%;"
    @sort-change="handleSortChange"
  >
    <el-table-column
      prop="name"
      label="Name"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="date"
      label="Date"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="Address"
      width="180"
    ></el-table-column>
    <el-table-column
      label="Actions"
      width="120"
    >
      <template slot-scope="scope">
        <span class="action-button">Edit</span>
        <span class="action-button">Delete</span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    style="margin-top: 20px; text-align: right;"
  ></el-pagination>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Doe', date: '2021-01-01', address: '123 Main St' },
        { id: 2, name: 'Jane Smith', date: '2021-02-01', address: '456 Elm St' },
        // more data...
      ],
      currentPage: 1,
      pageSize: 10,
      total: 20,
    };
  },
  methods: {
    handleSortChange(sort) {
      // 排序逻辑
      console.log(sort);
    },
    handleSizeChange(size) {
      // 每页显示条数改变逻辑
      console.log(size);
    },
    handleCurrentChange(page) {
      // 当前页码改变逻辑
      console.log(page);
    },
  },
};
</script>

<style scoped>
.action-button {
  color: #409eff;
  cursor: pointer;
  margin-right: 10px;
}
</style>

在这个示例中，el-table 的数据通过 `tableData` 属性进行绑定，el-pagination 的当前页码、每页显示条数和总数分别绑定到 `currentPage`、`pageSize` 和 `total` 属性。你可以根据实际情况进行调整和修改。

需要注意的是，以上代码仅提供了分页和排序的基本实现，拖拽功能需要根据具体需求进行自定义开发，可以使用 Element UI 提供的 el-draggable 组件结合 el-table 实现拖拽功能。具体实现方式可以参考 Element UI 官方文档中的示例和说明。

希望这个示例可以帮助到你！如果有任何问题，请随时提问。