Vue+ELement构建动态树与数据表格，轻松实现分页模糊查询！

前端

2024-01-09 21:22:32

Vue + Element：构建动态树和数据表格，实现分页模糊查询

在前端开发中，构建动态树和数据表格并实现分页模糊查询是一个常见且重要的任务。本文将使用 Vue 和 Element UI 来逐步指导你完成此功能的实现。

构建动态树

Element UI 的 el-tree 组件非常适合构建具有父子关系的动态树。它提供了一个可扩展且易于操作的界面，支持节点的添加、删除和更新。

构建数据表格

el-table 组件可用于创建数据表格，它具有丰富的功能，如分页、排序和筛选。它允许你轻松地展示和管理数据集合。

实现分页模糊查询

为了实现分页模糊查询，我们将使用 Vue 的 computed 属性和 methods 方法。computed 属性可以根据其他属性计算出一个新值，而 methods 方法可以执行特定的操作。

完整代码示例

<template>
  <div>
    <el-tree :data="treeData" show-checkbox @node-click="handleNodeClick"></el-tree>
    <el-table :data="tableData" border stripe>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, computed, defineComponent } from 'vue'
import { ElTree, ElTable } from 'element-ui'

export default defineComponent({
  components: { ElTree, ElTable },
  setup() {
    const treeData = ref([
      {
        label: '父节点1',
        children: [
          { label: '子节点1-1' },
          { label: '子节点1-2' }
        ]
      },
      {
        label: '父节点2',
        children: [
          { label: '子节点2-1' },
          { label: '子节点2-2' }
        ]
      }
    ])

    const tableData = ref([
      { name: '张三', age: 20, address: '北京市朝阳区' },
      { name: '李四', age: 25, address: '上海市浦东新区' },
      { name: '王五', age: 30, address: '广州市天河区' }
    ])

    const handleNodeClick = (data) => { console.log(data) }

    return { treeData, tableData, handleNodeClick }
  }
})
</script>