el table plus

el-ตารางบวก

ส่วนประกอบที่กำหนดค่าได้ตามตาราง el

ความเป็นมา: เมื่อใช้องค์ประกอบ el-table จะต้องเขียนโค้ดเทมเพลตมากเกินไป ส่งผลให้มีโค้ด HTML บนหน้าเว็บมากเกินไป การดูไลบรารีองค์ประกอบองค์ประกอบจากเลเยอร์แอปพลิเคชัน แม้ว่าการออกแบบ API จะมีความยืดหยุ่นมาก แต่ก็ใช้งานยุ่งยากมาก ดังนั้น จำเป็นต้องจัดทำแพ็กเกจ el-table เพื่อทำให้การกำหนดค่าที่เกี่ยวข้องง่ายขึ้น

การออกแบบ API ของเลเยอร์แอปพลิเคชันค่อนข้างดี เราขอแนะนำตาราง antd-design-vue การออกแบบ el-table-plus อ้างอิงถึงส่วนประกอบของตาราง antd-design-vue ในเวลาเดียวกัน คุณลักษณะ/เหตุการณ์ทั้งหมดรองรับส่วนประกอบตารางองค์ประกอบดั้งเดิม ซึ่งจะไม่ทำลาย API ดั้งเดิม (ไม่มีการบุกรุก) และยังรองรับฟังก์ชัน slot/jsx/h เพื่อปรับแต่งการเรนเดอร์ข้อมูลคอลัมน์ในสามวิธีเพื่อให้ได้แบบกำหนดเอง การแสดงผลตรรกะทางธุรกิจ นอกจากนี้ยังรวมส่วนประกอบการแบ่งหน้าที่ใช้กันทั่วไปและ API แบบขยายช่วยจัดการธุรกิจทั่วไปได้อย่างสะดวก

กรณีออนไลน์

https://lq782655835.github.io/el-table-plus

คุณสมบัติ

1. การใช้งานที่เรียบง่าย จำเป็นต้องมีข้อมูลแอตทริบิวต์และคอลัมน์เพียงสองรายการเท่านั้นจึงจะสามารถรองรับได้
2. การสืบทอดแบบเต็ม, การสืบทอดแอตทริบิวต์/เหตุการณ์แบบเต็มของ element-ui
3. ปรับขนาดได้สูง รองรับฟังก์ชัน slot/jsx/h เพื่อปรับแต่งข้อมูลคอลัมน์การแสดงผลได้สามวิธี
4. สะดวกยิ่งขึ้น ขยายเหตุการณ์การเลื่อน องค์ประกอบการแบ่งหน้า การจัดรูปแบบด่วน fn

การติดตั้งและการแนะนำ

ติดตั้ง

yarn add @springleo/el-table-plus

แนะนำ

ส่วนประกอบนี้ขึ้นอยู่กับส่วนประกอบ el-table ของ element-ui และจำเป็นต้องแนะนำด้วยตัวเอง

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

การใช้งานขั้นพื้นฐาน

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

เอพีไอ

แอตทริบิวต์ el-table-plus

รองรับแอตทริบิวต์ดั้งเดิมทั้งหมดบน el-table และขยาย API ต่อไปนี้

พารามิเตอร์	พิมพ์	ค่าเริ่มต้น	แสดงให้เห็น
กำลังโหลด	บูลีน	เท็จ	กำลังโหลดภาพเคลื่อนไหว
ข้อมูล	อาร์เรย์	-	แสดงรายการข้อมูล
คอลัมน์	อาร์เรย์	-	รายการการกำหนดค่ารายการคอลัมน์ โปรดดูรายละเอียดคอลัมน์ Attrs ด้านล่าง
การแบ่งหน้า	วัตถุ		การกำหนดค่าตัวเปลี่ยนหน้า ไม่ได้ตั้งค่าไว้ตามค่าเริ่มต้น ตัวเปลี่ยนหน้าจะไม่แสดงขึ้นมา API ที่เกี่ยวข้องสามารถพบได้ใน el-pagination
ทั้งหมด	ตัวเลข	0	จำนวนผู้เปลี่ยนหน้าทั้งหมด

เหตุการณ์ el-table-plus

รองรับเหตุการณ์ดั้งเดิมทั้งหมดบน el-table และขยาย API ต่อไปนี้

ชื่อเหตุการณ์	แสดงให้เห็น	คำอธิบาย
เลื่อน	เหตุการณ์แถบเลื่อนตาราง	จ
เปลี่ยนหน้า	กิจกรรมเปลี่ยนคนเปลี่ยนเพจ	{ ขนาดหน้า, หน้าปัจจุบัน }

คุณลักษณะคอลัมน์

รองรับแอตทริบิวต์ดั้งเดิมและช่องที่กำหนดขอบเขตของ el-table-column และขยาย API ต่อไปนี้:

Attr	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ฉลาก	สตริง		ชื่อคอลัมน์
ข้อเสนอ	สตริง		ช่องข้อมูลคอลัมน์รองรับการซ้อนออบเจ็กต์หลายระดับ เช่น user.email.prefix
ที่ซ่อนอยู่	บูลีน		ว่าจะซ่อนคอลัมน์นี้หรือไม่ คำแนะนำนี้เป็นคำแนะนำที่คำนวณได้ซึ่งเปิดใช้งานการแสดงผลและการซ่อนแบบตอบสนอง
กำหนดเองRender	การทำงาน		การแสดงข้อมูลคอลัมน์แบบกำหนดเอง พารามิเตอร์ฟังก์ชัน (ค่า, แถว, คอลัมน์, $index, h) รองรับฟังก์ชัน jsx และ h
หัวข้อที่กำหนดเอง	การทำงาน		การแสดงผลส่วนหัวคอลัมน์แบบกำหนดเอง พารามิเตอร์ฟังก์ชัน (คอลัมน์, $index, h) รองรับฟังก์ชัน jsx และ h
scopedSlots	วัตถุ		ใช้โหมดสล็อตเพื่อปรับแต่งการแสดงผล และแทนที่ฟังก์ชัน customRender/customTitle ตัวอย่างเช่น: { customRender: 'slotName1', customTitle: 'slotName2' }

ชุดปลั๊กอิน Vue

ปลั๊กอิน	สถานะ	คำอธิบาย
@ springleo/el-dialog-helper		สัญญาว่าจะโต้ตอบใน Vue!
@ springleo/el-table-plus		ส่วนประกอบที่กำหนดค่าได้ตามตาราง el
@ springleo/el-form-plus		แบบฟอร์มสคีมาตามแบบฟอร์ม element-ui
@ springleo/virtual-scroll-table.php		องค์ประกอบตารางการเลื่อนเสมือนแบบเลื่อนลงที่ไม่มีที่สิ้นสุด

ใบอนุญาต

เอ็มไอที