ele easy table
1.0.0
npm install ele-easy-table -S
import 'ele-easy-table'
<ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>
ดูซอร์สโค้ดสาธิตสำหรับรายละเอียด
ขึ้นอยู่กับ element-ui โปรเจ็กต์ของคุณจะต้องติดตั้ง element-ui
เวอร์ชัน Element-ui ที่ใช้โดยซอร์สโค้ด
"element-ui": "^2.4.5"
| คุณสมบัติ | แสดงให้เห็น | พิมพ์ | ค่าเริ่มต้น |
|---|---|---|---|
| รูปร่าง | พื้นที่เงื่อนไขแบบสอบถามตาราง | วัตถุ | - |
| โต๊ะ | พื้นที่แสดงตาราง | วัตถุ | - |
| formData.sync | เขตข้อมูลแบบสอบถามแบบฟอร์ม | วัตถุ | - |
| การแบ่งหน้า | ไม่ว่าจะแสดงพื้นที่การเพจหรือไม่ | [บูลีน,วัตถุ] | จริง |
| คุณลักษณะอื่น ๆ | คุณสมบัติดั้งเดิมของ el-table | อ้างถึงคุณสมบัติดั้งเดิมของ el-table | - |
| คุณสมบัติ | แสดงให้เห็น | พิมพ์ | ค่าเริ่มต้น | หมายเหตุ |
|---|---|---|---|---|
| ระดับ | การตั้งค่ารูปแบบพื้นที่เงื่อนไขเงื่อนไขการสืบค้นตาราง | วัตถุ | - | - |
| สไตล์ | การตั้งค่ารูปแบบอินไลน์ของเงื่อนไขเงื่อนไขการสืบค้นตาราง | วัตถุ | - | - |
| พับหมายเลข | ตารางจะยุบลงเมื่อมีเงื่อนไขการสืบค้นมากกว่าหลายเงื่อนไข | ตัวเลข | - | หากไม่มีพารามิเตอร์นี้ ทั้งหมดจะแสดงขึ้น |
| รายการ | รายการเงื่อนไขแบบสอบถามตาราง | อาร์เรย์ | - | ดูซอร์สโค้ดสาธิตสำหรับรายละเอียด |
| คุณสมบัติ | แสดงให้เห็น | พิมพ์ | ค่าเริ่มต้น | หมายเหตุ |
|---|---|---|---|---|
| รายการ | รายการข้อมูลตาราง | อาร์เรย์ | - | - |
| คอลัมน์ | รายการส่วนหัวของตาราง | อาร์เรย์ | - | ดูซอร์สโค้ดสาธิตสำหรับรายละเอียด |
| กำลังโหลด | จะแสดงภาพเคลื่อนไหวในการโหลดตารางหรือไม่ | บูลีน | - | |
| แสดงดัชนี | จะแสดงคอลัมน์หมายเลขซีเรียลหรือไม่ | บูลีน | จริง | |
| ดัชนีคงที่ | ไม่ว่าจะแก้ไขคอลัมน์หมายเลขซีเรียล | บูลีน | เท็จ | |
| indexLabel | ปรับแต่งข้อความส่วนหัวของรายการหมายเลขซีเรียล | สตริง | หมายเลขซีเรียล | |
| การเลือก | สร้างการกำหนดค่าการเลือกหลายรายการ | วัตถุ | - |
| คุณสมบัติ | แสดงให้เห็น | พิมพ์ | ค่าเริ่มต้น | หมายเหตุ |
|---|---|---|---|---|
| กำหนดค่า | สร้างคุณสมบัติการเลือกหลายรายการ | วัตถุ | - | - |
คุณลักษณะดั้งเดิมของ el-pagination
ดำเนินการเมื่อมีการสลับหมายเลขหน้าหรือหมายเลขที่แสดงในแต่ละหน้าเปลี่ยนแปลง ข้อมูลจะได้รับ จากนั้นกำหนดให้กับ table.list เพื่ออัปเดตรายการ
เหตุการณ์ดั้งเดิมของ el-table เช่น: @selection-change="handleSelectionChange" ดูซอร์สโค้ดสาธิตสำหรับรายละเอียด
| เหตุการณ์ | แสดงให้เห็น | พารามิเตอร์ |
|---|---|---|
| จัดการขยาย | เหตุการณ์การโทรกลับหลังจากการพับแบบมีเงื่อนไข | คือExpand |
ตารางมีโอเวอร์โฟลว์สไตล์อินไลน์ใหม่: มองเห็นได้; หากต้องการใช้เลย์เอาต์แบบติดหนึบของส่วนหัวของตาราง เพียงเพิ่มสไตล์ต่อไปนี้
หมายเหตุ: หากเป็นสไตล์ที่กำหนดขอบเขต คุณต้องใช้ตัวดำเนินการ >>> (ดูรายละเอียดในขอบเขต CSS ของเอกสาร)
/* 全局样式 */
. el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
/* scoped 局部样式 */
. ele-easy-table-demo > > > . el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}ดูซอร์สโค้ดสาธิตสำหรับรายละเอียด
หมายเหตุ: ไม่สามารถใช้กับการตรึงคอลัมน์ในเวลาเดียวกันได้ หากต้องการใช้พร้อมกัน คุณสามารถใช้แอตทริบิวต์ตารางดั้งเดิมขององค์ประกอบเพื่อตั้งค่าความสูงของตารางได้
