el-table列表请求接口获取 及搜索数据绑定

html部分  通过动态绑定data获取

在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。

设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

default-expand-all属性表示默认展开，不需要展开可以删除。row-key="id" 和 row里面的属性有children字段(即数据里面需要有children字段) 是必须的，:tree-props="{children: 'children',hasChildren: 'hasChildren'}可有可无。

如果不是懒加载的话，后端不要设置hasChildren 这个属性，要不然不能树形显示；如果是懒加载，则需要设置hasChildren字段。

//绑定查询页面数据   :model="queryParams"

        
          
        


//动态绑定:data="areaList"

             

script部分

 data() {
    return {
       // 遮罩层
      loading: true,
        // 显示搜索条件
      showSearch: true,
      // 表格树数据
      areaList: [],
     // 查询参数
      queryParams: {
        areaName: undefined,
      },
    },

//初始化
  created() {
    this.getList();
   },

//方法
  methods: {
   
    /** 查询区域列表 获取 areaList */
    getList() {
      this.loading = true;
    //this.queryParams 为顶部搜索条件绑定参数
      listarea(this.queryParams).then((response) => {
        this.areaList = this.handleTree(response.data, "id"); //树结构列表获取
        this.loading = false;
      });
    },


}

函数封装部分

// 查询区域列表
export function listarea(query) {
  return request({
    url: '/system/area/list',
    method: 'get',
    params: query
  })
}