elsa vue

เอลซา

⚡ elsa (ผู้ดูแลระบบแบบง่าย eleme) ขึ้นอยู่กับองค์ประกอบ-ui และสรุป el-form, el-table และส่วนประกอบอื่น ๆ และเหมาะสำหรับการพัฒนาอย่างรวดเร็วของโครงการการจัดการแบ็กเอนด์

สำหรับตัวอย่างการใช้งาน โปรดดู: ตัวอย่าง

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

 npm i elsa - vue - S 

 // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'

Vue . use ( Element )
Vue . use ( Elsa ) 

คุณสมบัติ

• else-card
  • รองรับการตั้งค่าหลักและคำบรรยาย
• อย่างอื่น-ตาราง
  • คอลัมน์รายการที่กำหนดค่าได้
  • รองรับการควบคุมเพจ
  • รองรับการแสดงข้อมูลรูปต้นไม้และการโหลดแบบ Lazy Loading
• เอลซา-รูปแบบ
  • ส่วนประกอบแบบฟอร์มที่รองรับ
    • el-อินพุต
    • เอล-วิทยุ
    • el-ช่องทำเครื่องหมาย
    • el-เลือก
    • el-อัพโหลด
    • el-xxx-เครื่องมือเลือก
  • รูปแบบที่กำหนดเอง
  • รีเซ็ตการตรวจสอบแบบฟอร์ม
  • การแยกวิเคราะห์วัตถุที่ซ้อนกัน
  • แบบฟอร์มการตั้งค่าการปิดใช้งานโดยรวม
  • ข้อมูลคำแนะนำสำหรับรายการแบบฟอร์ม
  • รายการแบบฟอร์ม: ไดนามิก/เชื่อมโยง
    • ปิดการใช้งาน/เปิดใช้งาน
    • แสดง/ซ่อน
    • ปรับเปลี่ยนตัวเลือกหลายตัวเลือกแบบไดนามิก

elsa-ตาราง

การใช้งาน:

1. รับแหล่งข้อมูล dataSource ประเภท Array
2. กำหนดค่าข้อมูลคอลัมน์ที่แสดงตามคุณสมบัติของวัตถุในแหล่งข้อมูล
3. ตั้งค่าการแบ่งหน้าพารามิเตอร์การเพจ

 < elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " /> 

 export default {
  data ( ) {
    return {
      dataSource : [
        { name : 'eminoda' , age : 30 } ,
        { name : 'foo' , age : 40 } ,
        { name : 'bar' , age : 50 }
      ] ,
      columns : [
        { label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
        { label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
        { label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
      ] ,
      pagination : {
        pageSize : 10 ,
        currentPage : 1 ,
        total : 0 ,
        currentChange : currentPage => { } ,
        sizeChange : pageSize => { }
      }
    }
  }
}

คุณสมบัติ ElsaTable

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
คอลัมน์	ข้อมูลคอลัมน์	อาร์เรย์
แหล่งข้อมูล	แหล่งข้อมูล	อาร์เรย์
การแบ่งหน้า	ข้อมูลการแบ่งหน้า	วัตถุ
...elProps	แอตทริบิวต์ el-table

ElsaTable.คอลัมน์

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

สำหรับรายละเอียดเพิ่มเติม โปรดดูที่: คอลัมน์ el-table

ElsaTable.elProps

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
ข้อมูล	แทนที่ด้วยแหล่งข้อมูล
ชายแดน	ไม่ว่าจะมีเส้นขอบแนวตั้ง	บูลีน		เท็จ
ขนาด	ขนาด	สตริง	กลาง/เล็ก/มินิ
พอดี	ความกว้างของคอลัมน์รองรับตัวเองหรือไม่	บูลีน		จริง

สำหรับรายละเอียดเพิ่มเติม โปรดดูที่แอตทริบิวต์ el-table

เหตุการณ์ ElsaTable

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
การเลือกการเปลี่ยนแปลง	เหตุการณ์นี้จะถูกทริกเกอร์เมื่อการเปลี่ยนแปลงการเลือก	ฟังก์ชั่น(การเลือก)

สำหรับรายละเอียดเพิ่มเติม โปรดดู: เหตุการณ์ el-table

? หมายเหตุ: บางเหตุการณ์ยากที่จะนำไปใช้ตามโครงสร้างไฟล์ปัจจุบัน (เช่น: การเรียงลำดับ การกรอง การรวมแบบฟอร์ม...) คุณสามารถกำหนดเนื้อหาของไฟล์กำหนดค่าในข้อมูลได้ (แทนวิธีการนำเข้า)

เอลซา-รูปแบบ

การใช้งาน:

1. กำหนดแบบจำลองข้อมูลแบบฟอร์ม
2. กำหนดค่าฟิลด์แบบฟอร์มและกำหนดเค้าโครง (ไม่บังคับ)

 < elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
  < el-row type =" flex " justify =" center " >
    < el-button @click =" submit " type =" primary " >提交</ el-button >
    < el-button @click =" reset " type =" warning " style =" margin-left:10px; " >重置</ el-button >
  </ el-row >
</ elsa-form > 

 export default {
  data ( ) {
    return {
      fields : {
        name : {
          label : '用户名' ,
          elTag : 'el-input' ,
          elAttrs : {
            placeholder : '请输入用户名'
          } ,
          customRender : 'nameCheck' ,
          rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
        } ,
        password : {
          label : '密码' ,
          elTag : 'el-input' ,
          elAttrs : {
            type : 'password' ,
            showPassword : true
          } ,
          rules : [ { required : true , trigger : 'change' } ]
        }
      } ,
      model : {
        name : '' ,
        password : ''
      }
    }
  }
}

คุณสมบัติ ElsaForm

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
กำหนดค่า	การกำหนดค่ารายการแบบฟอร์ม	วัตถุ
แบบอย่าง	แบบจำลองข้อมูลแบบฟอร์ม	วัตถุ
เค้าโครง	เค้าโครงแบบฟอร์ม	อาร์เรย์
พิการ	แบบฟอร์มทั้งหมดถูกปิดใช้งาน	บูลีน		เท็จ
...elProps	การกำหนดค่ารายการแบบฟอร์ม	วัตถุ

ElsaForm.config

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
สนาม	ฟิลด์รายการแบบฟอร์มที่สอดคล้องกับแอตทริบิวต์ของโมเดล	วัตถุ
สนาม.ฉลาก	ชื่อ	สตริง
field.elTag	แท็กแบบฟอร์มองค์ประกอบ	สตริง	el-input/select/radio/cascader/date-picker/time-picker/upload
field.elAttrs	คุณลักษณะของรายการแบบฟอร์ม (อ้างอิงถึงส่วนประกอบที่เกี่ยวข้อง elTag)	วัตถุ
field.elStyle	รูปแบบสไตล์รายการแบบฟอร์ม	วัตถุ
field.พิเศษ	ข้อความแจ้ง	สตริง
field.extraIcon	ไอคอนไอคอนข้อความแจ้ง	สตริง		el-icon-คำเตือน-โครงร่าง
สนาม.กฎ	กฎการตรวจสอบแบบฟอร์ม	อาร์เรย์
สนาม ตัวเลือก	เมื่อตรวจสอบแล้ว จะใช้ Select เพื่อแสดงข้อมูล	อาร์เรย์
สนาม.มองเห็นได้	การเชื่อมโยงคุณสามารถควบคุม การแสดงผลและซ่อน ตามรุ่น[ยื่น]	บูลีน/สตริง/ฟังก์ชัน ({model})
field.customRender	เทมเพลตที่แสดงทางด้านขวาของ elTag	สตริง
field.slotRender	เทมเพลตภายใน elTag (เช่น เนื้อหาในการอัปโหลด)	สตริง

สำหรับรายละเอียดเพิ่มเติม โปรดดู: วิธีการ el-form-item

ElsaForm.field.elAttrs

ตัวอย่างคุณสมบัติพิเศษบางอย่าง

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
พิการ	ปิดการใช้งาน	ฟังก์ชั่น ({model}) / บูลีน
เป็นระยะไกล	elTag กำลังโหลด el-select แบบขี้เกียจ	บูลีน
วิธีการระยะไกล	elTag กำลังโหลด el-select แบบขี้เกียจ	ฟังก์ชั่น (เสร็จสิ้น, {model}) / Boolean
ขี้เกียจ	elTag กำลังโหลด el-cascader แบบขี้เกียจ	บูลีน
ขี้เกียจโหลด	elTag กำลังโหลด el-cascader แบบขี้เกียจ	ฟังก์ชั่น (โหนด, แก้ไข, { เสร็จแล้ว }) / Boolean

ElsaForm.เค้าโครง

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
elTag	แท็กแบบฟอร์มองค์ประกอบ	สตริง	เอล-แถว/พ.อ
elAttrs	คุณลักษณะของรายการแบบฟอร์ม (อ้างอิงถึงส่วนประกอบที่เกี่ยวข้อง elTag)	วัตถุ
เด็ก	เด็ก	วัตถุ
สนาม	ฟิลด์รายการแบบฟอร์ม	สตริง

ElsaForm.elProps

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
ความกว้างของฉลาก	ความกว้างของป้ายกำกับฟิลด์แบบฟอร์ม	สตริง
ป้ายคำต่อท้าย	คำต่อท้ายสำหรับป้ายกำกับฟิลด์แบบฟอร์ม	สตริง
ขนาด	ขนาด	สตริง	กลาง/เล็ก/มินิ

สำหรับรายละเอียดเพิ่มเติม โปรดดูที่แอตทริบิวต์ el-form

วิธีการ ElsaForm

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
ตรวจสอบความถูกต้อง	การตรวจสอบข้อมูลแบบฟอร์ม	ฟังก์ชั่น (ผิดพลาด รุ่น)
รีเซ็ตฟิลด์	รีเซ็ตรายการแบบฟอร์ม	ฟังก์ชั่น(อุปกรณ์ประกอบฉาก<Array | String>)
ชัดเจน ตรวจสอบ	ล้างผลการตรวจสอบ	ฟังก์ชั่น(อุปกรณ์ประกอบฉาก<Array | String>)

สำหรับรายละเอียดเพิ่มเติม โปรดดู: วิธีการ el-form