[Element-UI] 動的なツリー、データテーブル、ページング効果を実現

情報 2023-10-05 06:21:09 訪問数: null

1. はじめに

1 はじめに

        最新のソフトウェア開発では、動的ツリー、データ テーブル、ページング効果が多くのアプリケーションの中核的な要件になっています。ビジネスの規模と複雑さが増すにつれて、多くの場合、大量の階層構造データを表示し、高度にインタラクティブで効率的な操作を実装する必要があります。

        動的ツリーは、明確に編成されたスケーラブルな表示を提供し、ユーザーがツリー ノードを簡単に表示および操作できるようにします。データ テーブルはデータを表形式で表示し、ユーザーは並べ替え、フィルター、編集などの操作を行うことができます。

        ページング効果により、大量のデータを 1 ページまたは複数ページのコンテンツに分割し、管理と閲覧が容易になります。これら 3 つの機能を組み合わせることで、膨大なデータ収集をより適切に処理できるだけでなく、ユーザーが必要な情報を迅速に見つけることもできます。

        この記事では、最新のフロントエンド テクノロジを使用して動的なツリー、データ テーブル、ページング効果を実現し、それによってアプリケーションに優れたユーザー エクスペリエンスをもたらす方法を紹介します。

2. 目的

Element UI を使用して動的なツリー、データ テーブル、ページング効果を実現する主な目的は次のとおりです。

  1. 美しく使いやすいユーザー インターフェイスを提供する: Element UI は、Vue.js に基づくコンポーネント ライブラリのセットであり、豊富な UI コンポーネントとスタイルのセットを提供し、開発者が美しく使いやすいユーザー インターフェイスを迅速に構築するのに役立ちます。ユーザーインターフェース。Element UI を使用することで、動的ツリー、データ テーブル、ページングなどの機能の統一された一貫した外観とインタラクティブなエクスペリエンスを提供し、ユーザーに快適で満足してもらえるようにします。
  2. 迅速な開発およびカスタマイズ機能: Element UI は豊富な事前定義コンポーネントとスタイルを提供するため、開発者はこれらの機能を最初から構築する必要はなく、既存のコンポーネントを直接使用して動的なツリー、データ テーブル、およびページング効果を実現できます。さらに、Element UI は柔軟なカスタマイズ オプションとテーマ構成もサポートしており、特定のプロジェクトのニーズに応じてパーソナライズされたデザインとスタイルの変更を実行できるため、開発時間とコストを節約できます。
  3. 高い拡張性と保守性: Element UI のコンポーネント ライブラリは多くの実プロジェクトで検証されており、安定したアーキテクチャと優れたコード品質を備えており、保守と拡張が容易です。Element UI を使用すると、事前定義されたコンポーネントと API をカスタム ビジネス ロジックと組み合わせて、複雑な動的ツリー、データ テーブル、ページング関数を構築できます。同時に、Element UI は、開発者が問題を見つけてエクスペリエンスを共有しやすくするための豊富なドキュメントとコミュニティ リソースも提供します。

2. ダイナミックツリー

データベース内のデータに基づいて、必要な動的なツリー効果を作成します。

1. バックエンドデータインターフェース定義

データのsqlの下、つまりツリーメニューのsqlxmlファイル内

<resultMap id="BaseResultMap" type="com.zking.ssm.model.Module" >
      <id column="id" jdbcType="INTEGER" property="id" />
      <result column="pid" jdbcType="INTEGER" property="pid" />
      <result column="text" jdbcType="VARCHAR" property="text" />
      <result column="icon" jdbcType="VARCHAR" property="icon" />
      <result column="url" jdbcType="VARCHAR" property="url" />
      <result column="sort" jdbcType="INTEGER" property="sort" />
      <collection property="modules" ofType="com.zking.ssm.model.Module"
                  column="id" select="queryChildNodeByPid"/>
</resultMap>
<sql id="Base_Column_List" >
    id, pid, text, icon, url, sort
</sql>
<!--先根据id查询菜单根级目录，再利用上次查询结果collection中column的值id作为递归查询条件，查出所有子菜单，返回结果必须为resultMap，并且值为上面构建的resultMap的id值-->
<select id="queryChildNodeByPid" resultMap="BaseResultMap" parameterType="int">
    select <include refid="Base_Column_List"/> from t_module_vue
    where pid=#{value}
</select>

コントローラー層

    @RequestMapping("/queryRootNode")
    @ResponseBody
    public JsonResponseBody<List<Module>> queryRootNode(){
        try {
            List<Module> modules = moduleService.queryRootNode(-1);
            return new JsonResponseBody<>("OK",true,0,modules);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
        }
    }

2. フロントエンドナビゲーションメニューバインディング

2.1. ページレイアウト

メニュー構成

<!--  添加动态路由：router :default-active="$route.path"-->
  <el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo"
           background-color="#334157"
           text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu v-for="m in menus" :index="'index_'+m.id" :key="'key_'+m.id">
      <template slot="title">
        <i :class="m.icon"></i>
        <span>{
   
   { m.text }}</span>
      </template>
      <el-menu-item v-for="m2 in m.modules" :index="m2.url" :key="'key_'+m2.id">
        <i :class="m2.icon"></i>
        <span>{
   
   { m2.text }}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>

第 1 レベルのノードel-submenuの key 属性は一意であり、index 属性も一意であり、index 属性はメニューの折りたたみを制御するために使用されます。第
2 レベルのノードel-menu-item のkey 属性は一意であり、 index 属性は一意であり、index 属性はページジャンプを制御するために使用されます。

vue+element の el-menu コンポーネントは、ルーティングジャンプと現在の項目の設定を実装します。

router :default-active="$route.path"
  1. ルートジャンプを実装するには、まずel-menuタグにrouter属性を追加し、各el-menu-itemタグのindex属性にURLを設定してel-menu-itemをクリックするだけでルートジャンプが実装されます。
  2. 現在の項目に移動するには、el-menuタグのbind :default-active="$route.path"を指定します。これはバインディング属性であることに注意してください。 $route.pathが次と等しい場合は、 「 : 」を追加することを忘れないでください。el-menu-itemタグ。index 属性値が in の場合、その項目は現在の項目です。
  3. el-submenu タグの url 属性は空にすることも、同じにすることもできません。そうしないと、複数のノードが同じ縮小/折りたたみ効果を持つという問題が発生します。

2.2. データバインディング

  created() {
    this.$root.Bus.$on('sjm', v => {
      this.collapsed = v;
    });
//树形菜单
    //后台访问地址
    let url = this.axios.urls.SYSTEM_MENUS;
    this.axios.get(url, {}).then(r => {
//利用数组接受后台的数据
      this.menus = r.data.rows;
    }).catch(error => {

    })

  }

2.3. ルーティングバインディングページの作成

ルートバインディング

ジャンプページの書き込み

自分のニーズに応じて実行してください

効果

3. データテーブルとページング

1. バックエンドデータインターフェース定義

package com.zking.ssm.controller;

import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import com.zking.ssm.vo.BookFileVo;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/book")
public class BookController {

    @Autowired
    private IBookService bookService;

    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            List<Book> books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }

 
}

2. フロントエンド

テーブル内のprop属性は、バックエンド エンティティ クラスと同じ属性名を持つ必要があります。そうでない場合、データは表示されません。

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称 : ">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                     background :page-sizes="[10, 20, 30, 40]" :page-size="rows"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      bookname: '',
      tableData: [],
      rows: 10,
      total: 0,
      page: 1
    }
  },
  methods: {
    handleSizeChange(r) {
      //当页大小发生变化
      let params = {
        bookname: this.bookname,
        rows: r,
        page: this.page
      }
      this.query(params);
    },
    handleCurrentChange(p) {
      //当前页码大小发生变化
      let params = {
        bookname: this.bookname,
        rows: this.rows,
        // 分页
        page: p
      }
      // console.log(params)
      this.query(params);
    },
    query(params) {
      //获取后台请求书籍数据的地址
      let url = this.axios.urls.SYSTEM_BOOKLIST;
      this.axios.get(url, {
        params: params
      }).then(d => {
        this.tableData = d.data.rows;
        this.total = d.data.total;
      }).catch(e => {
      });
    },
    onSubmit() {
      let params = {
        bookname: this.bookname
      }
      console.log(params)
      this.query(params);
      this.bookname = ''
    }
  },
  created() {
    this.query({})
  }
}
</script>

<style>
</style>

効果

おすすめ

転載: blog.csdn.net/weixin_74383330/article/details/133312260
おすすめ
これは Linus が最も耐えられないエピソードです - Unreal Engine のコード仕様により、汚い言葉、スレーブ、マスターの使用が禁止されています
ランキング
図10は、1〜20の繰り返しの間の乱数を生成し、DESCを出力しません
何をすべきかについてのPMOの話
Windows mingw64 の最も簡単なインストール構成
JVM-ガベージコレクション
ネットワークアーキテクチャ
詳細な使用Pythonの収率（未完）
eoj 1021 配列を使用して n クイーン問題を解決します (矛盾するクイーン対数を出力します)
2020-08-05-ハンガリーアルゴリズム
Pythonが曜日を決定します
[ホワイト] Day22道路は、分類アルゴリズムの概要の質問を磨きます
アーカイブ
もっと
2024-05-25(1)
2024-05-24(11)
2024-05-23(35)
2024-05-22(9)
2024-05-21(36)
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)

コードワールド

© 2018 codetd.com