el data table

ตาราง El-Data

การร้องขออัตโนมัติโดย axios รองรับการปนเปื้อนโครงสร้างข้อมูลต้นไม้การค้นหาที่กำหนดเองคอลัมน์การทำงานที่กำหนดเองซึ่งทำให้ REST API ได้อย่างง่ายดาย?

ตารางใช้ @femessage/el-form-renderer เพื่อแสดงผล

中文文档

สารบัญ

• การแนะนำ
  • คดเคี้ยว
  • ข้อมูลขับเคลื่อน
  • ทำไม
• คุณสมบัติ
• ลิงค์
• ติดตั้ง
• เริ่มต้นอย่างรวดเร็ว
  • ส่วนประกอบการลงทะเบียนทั่วโลก
  • เทมเพลต
• อ้างอิง
• การบริจาค
• ผู้มีส่วนร่วม
• ใบอนุญาต

การแนะนำ

คดเคี้ยว

El-Data-Table ถูกสร้างขึ้นเพื่อแก้ปัญหาทางธุรกิจดังนั้นตรรกะ CRUD จึงถูกตั้งไว้ภายใน
ตัวอย่างเช่นในการพัฒนา API user สมมติว่าเส้นทางที่สัมพันธ์กันเช่นนี้:

 / api / v1 / users

CRUD API ที่พักผ่อนควรจะเป็น:

• สืบค้น

 GET / api / v1 / users ? page = 1 & size = 10

โครงสร้างข้อมูลเริ่มต้น

 {
  "code" : 0 ,
  "msg" : "ok" ,
  "payload" : {
    "content" : [ ] , // dataPath
    "totalElements" : 2 , // totalPath
  }
}

คุณสามารถปรับแต่ง Datapath/TotalPath

หาก hasPagination=false datapath เริ่มต้นคือ payload

• สร้าง

 POST / api / v1 / users

• อัปเดต

 PUT / api / v1 / users / : id

• ลบ

 DELETE / api / v1 / users / : id

จากนั้นจำเป็นต้องใช้รหัสต่อไปนี้เพื่อทำฟังก์ชั่น CRUD ให้สมบูรณ์

 < template >
  < el-data-table v-bind =" tableConfig " > </ el-data-table >
</ template > 

 < script >
export default {
  data ( ) {
    return {
      tableConfig : {
        url : '/example/users' ,
        columns : [
          {
            prop : 'name' ,
            label : '用户名'
          }
        ] ,
        searchForm : [
          {
            type : 'input' ,
            id : 'name' ,
            label : '用户名' ,
            el : {
              placeholder : '请输入'
            }
          }
        ] ,
        form : [
          {
            type : 'input' ,
            id : 'name' ,
            label : '用户名' ,
            el : {
              placeholder : '请输入'
            } ,
            rules : [
              {
                required : true ,
                message : '请输入用户名' ,
                trigger : 'blur'
              }
            ]
          }
        ]
      }
    }
  }
}
</ script >

ผลลัพธ์มีดังนี้:

• สืบค้น
  

• สร้าง

• อัปเดต

• ลบ

⬆กลับไปด้านบน

ข้อมูลขับเคลื่อน

การย้ายเนื้อหาของเทมเพลตไปยังสคริปต์หมายความว่าเทมเพลตสามารถลดลงได้และ JS สามารถดึงไปยังไฟล์อื่นเพื่อนำกลับมาใช้ใหม่ได้ ในเวลาเดียวกันข้อมูลใน JS เป็นชิ้นส่วนของ JSON ซึ่งหมายความว่าเครื่องมือสร้างรหัสสามารถช่วยได้

⬆กลับไปด้านบน

ทำไม

ทำไมคุณถึงสร้างตาราง El-Data ตาม EL-TABLE ของ Element-UI?

ฉันมักจะได้ยินเสียงต่อไปนี้:

1. El-Table สามารถครอบคลุมสถานการณ์ส่วนใหญ่โดยไม่มีข้อกำหนดเพิ่มเติม
2. ห่อหุ้มหลายสิ่งหลายอย่างมันหนักและมีเพศสัมพันธ์สูง
3. ผูกพันกับตรรกะทางธุรกิจมากเกินไปมันไม่ยืดหยุ่น ตรรกะทางธุรกิจควรจัดการโดยนักพัฒนา

ก่อนอื่นฉันต้องบอกว่า El-Table นั้นมีความยืดหยุ่นจริง ๆ แต่เมื่อดำเนินการตามคำขอเพจเพจมีเพียง El-Table เท่านั้นที่ไม่เพียงพอและส่วนประกอบ El-pagination จะต้องรวมกัน เนื้อหาส่วนใหญ่ของการประมวลผลเพจทำซ้ำ หากไม่มีองค์ประกอบทางธุรกิจระดับสูงเราจะได้รับรหัสซ้ำทุกที่

ในความเป็นจริงในแอพพลิเคชั่นผู้ดูแลระบบหรือแดชบอร์ดมีการดำเนินการ CRUD มากมายโดยใช้ RESTFUL API เป็นไปได้ที่จะใช้ URL เพียงหนึ่ง URL เพื่อสร้างส่วนประกอบในการทำฟังก์ชั่น CRUD ให้สมบูรณ์

ประการที่สองนักพัฒนาที่มีประสบการณ์หลายคนคิดว่าส่วนประกอบนั้นมีความยืดหยุ่นมากขึ้น

อย่างไรก็ตามสำหรับ "Newbees" ที่ขาดประสบการณ์พวกเขาไม่คุ้นเคยกับสถานการณ์ธุรกิจทั่วไป การดำเนินการพื้นฐานบางอย่างเช่นการตรวจสอบรูปแบบการกรองพื้นที่การเพิ่มการโหลดการจัดการข้อยกเว้นพวกเขาอาจลืมซึ่งส่งผลให้เกิดข้อบกพร่อง

สำหรับนักพัฒนาธุรกิจแนวหน้าในการเผชิญกับงานพัฒนาที่ไม่มีที่สิ้นสุดในความเป็นจริงพวกเขาไม่ต้องการจัดการกับตรรกะทางธุรกิจซ้ำ ๆ พวกเขาแค่ต้องการปลดปล่อยมือและออกไปทำงานก่อนเวลา

ในสถานการณ์เช่นนี้ El-Data-Table เกิด

⬆กลับไปด้านบน

คุณสมบัติ

• ใช้การกำหนดค่าเพื่อเรียก RESTFUL API เพื่อทำฟังก์ชั่น CRUD ให้สมบูรณ์
• รองรับข้อมูลโครงสร้างต้นไม้แสดงผล
• ผูกพันกับตรรกะการแบ่งหน้า
• รองรับปุ่มคอลัมน์ที่กำหนดเองและฟังก์ชั่นการทำงานที่กำหนดเอง
• สนับสนุนการสืบค้นการบันทึกบน URL ซึ่งสามารถรีเซ็ตสถานะการค้นหาหลังจาก History.go (-1) หรือ location.reload ()

⬆กลับไปด้านบน

ลิงค์

• เอกสาร
• FEM-VSCODE-HELPER

⬆กลับไปด้านบน

ติดตั้ง

ส่งเสริมให้ใช้เส้นด้ายเพื่อติดตั้ง

yarn add @femessage/el-data-table

⬆กลับไปด้านบน

เริ่มต้นอย่างรวดเร็ว

ส่วนประกอบการลงทะเบียนทั่วโลก

นี่คือเหตุผลเล็ก ๆ น้อย ๆ : ด้วยวิธีนี้การสร้างแอพของคุณ WebPack หรือ Bundler อื่น ๆ เพียงแค่รวมการอ้างอิงเป็นผู้ขายรายเดียวสำหรับทุกหน้าซึ่งใช้ส่วนประกอบนี้แทนที่จะเป็นผู้ขายหนึ่งรายสำหรับหนึ่งหน้า

 import Vue from 'vue'
// register component and loading directive
import ElDataTable from '@femessage/el-data-table'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
  Button ,
  Dialog ,
  Form ,
  FormItem ,
  Loading ,
  Pagination ,
  Table ,
  TableColumn ,
  Message ,
  MessageBox
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Loading . directive )
Vue . use ( Pagination )
Vue . use ( Table )
Vue . use ( TableColumn )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-table' , ElDataTable )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// show tips
Vue . prototype . $message = Message
// if the table component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios

เทมเพลต

< template >
  < el-data-table ></ el-data-table >
</ template >

⬆กลับไปด้านบน

อ้างอิง

• รายละเอียดกฎฟอร์มดู asynchronc-veriator
• LL-input Enter เพื่อส่ง
• การส่งแบบฟอร์ม HTML Spec
• what_is_a_url
• history_api
• encodeuricomponent
• regexp
• รายละเอียดการใช้งานการกำหนดเส้นทางใน Vue-Router
• พึ่งพาเพื่อน

⬆กลับไปด้านบน

การบริจาค

สำหรับผู้ที่มีความสนใจในการสนับสนุนโครงการนี้เช่น:

• รายงานข้อผิดพลาด
• ขอคุณสมบัติใหม่
• แก้ไขข้อบกพร่อง
• ใช้คุณสมบัติใหม่

โปรดดูคู่มือการสนับสนุนของเรา

⬆กลับไปด้านบน

ผู้มีส่วนร่วม

ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):

การจัดเก็บ - - -	Donald Shen	Miffycooper	Huanfeng Chen	evillt -	อัลวิน -	ฮั่น -
Kunzhijia -	เอ็ดการ์ -	รถม้า	阿禹。	Lujunwei	CJF -	แจ็ค-ไร่ -
โคลมักซ์	ล็อคหิมะ	ฟองน้ำ -	4ARK	การรันตง	pppenny	popupdialog -
นักวิ่ง	โยลอฟิท -	Huazaili -

โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!

ใบอนุญาต

มิกซ์

⬆กลับไปด้านบน