vue element crud

ขออภัย ที่เก็บข้อมูลนี้ไม่ได้รับการดูแลรักษาอีกต่อไป โปรดใช้โดยยอมรับความเสี่ยงเอง

หมายเหตุ: โปรเจ็กต์นี้อาจมีปัญหาในการใช้งานคอมโพเนนต์ และเมื่อเวลาผ่านไป เวอร์ชันของเฟรมเวิร์ก Vue และไลบรารี UI ขององค์ประกอบก็อาจได้รับการอัปเดตด้วย ซึ่งอาจไม่เหมาะสมกับปัจจุบันและอนาคต

วิวองค์ประกอบ crud

ส่วนประกอบ vue CRUD ที่ห่อไว้โดยยึดตามส่วนประกอบ vue UI ที่มีชื่อเสียง -- element-ui

เพิ่ม ลบ แก้ไข และตรวจสอบส่วนประกอบตามส่วนประกอบ element-ui

นี่คือการสาธิตง่ายๆ

คุณสามารถอ่านตัวอย่างและไฟล์ซอร์สโค้ด Crud.vue ในโปรเจ็กต์เพื่อช่วยให้คุณเข้าใจการใช้งานเฉพาะของส่วนประกอบ

การพัฒนาท้องถิ่น

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

$ npm install
$ npm run dev

เปิดเทอร์มินัลใหม่

$ npm run build:watch

การใช้งาน

คุณสามารถใช้ vue-element-crud เป็นปลั๊กอิน vue หรือเป็นส่วนประกอบ vue

หากคุณต้องการให้ถือเป็นส่วนประกอบ คุณสามารถนำเข้า CRUD เป็นส่วนประกอบได้

เป็นส่วนประกอบ

 import { CRUD } from 'vue-element-crud'

export default {
  components : { 'crud' : CRUD }
}

มิฉะนั้น คุณสามารถถือเป็นปลั๊กอินได้

เป็นปลั๊กอิน

ขั้นตอนที่ 1 เริ่มต้นโครงการ

คุณอาจต้องเริ่มต้นโปรเจ็กต์ vue หรือใช้โปรเจ็กต์ที่มีอยู่เพื่อดำเนินการต่อเนื่องจาก vue-loader หรือ babel-loader หรือ css-loader จำเป็นสำหรับ element-ui

$ vue init webpack < project-name > 

ขั้นตอนที่ 2 ติดตั้ง

ส่วนประกอบนี้ขึ้นอยู่กับ element-ui และ element-ui จะถูกติดตั้งโดยอัตโนมัติเมื่อคุณติดตั้ง vue-element-crud ดังนั้นคุณไม่จำเป็นต้องติดตั้ง element-ui เพิ่มเติม

$ npm install -S vue-element-crud

ขั้นตอนที่ 3 การใช้วิว

เพิ่มบรรทัดเหล่านี้ด้านล่างลงใน main.js ของคุณ

 import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'

Vue . use ( ElementUI )
Vue . use ( CRUD ) 

ขั้นตอนที่ 4 ดูตัวอย่าง

คุณสามารถอ่านเอกสารหรือตัวอย่างเพื่อดูวิธีใช้งานอุปกรณ์ประกอบฉากและวิธีการของ vue-element-crud นี้

เอพีไอ

อุปกรณ์ประกอบฉาก	พิมพ์	ที่จำเป็น	ค่าเริ่มต้น	คำอธิบาย
ข้อมูล	อาร์เรย์	จริง	-	อาร์เรย์ข้อมูลตาราง
รูปร่าง	วัตถุ	จริง	-	แบบฟอร์มวัตถุเพื่อจัดเก็บตัวแปรรายการแบบฟอร์ม
สาขา	วัตถุ	จริง	-	ออบเจ็กต์ที่อธิบายโครงสร้างรายการแบบฟอร์ม เช่น { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
กฎ	วัตถุ	เท็จ	-	ออบเจ็กต์ที่อธิบายกฎของรายการแบบฟอร์ม เช่น { name: [{ required: true, message: 'name is required.' }] }
ขนาด	สตริง	เท็จ	'large'	ปรับขนาดกล่องโต้ตอบ 'full' หรือ 'large' หรือ small หรือละเว้น
ฉลากกว้าง	สตริง	เท็จ	'100px'	ความกว้างของป้ายแบบฟอร์มและตาราง
แบบอินไลน์	บูลีน	เท็จ	false	ตรวจสอบว่าไอเท็มฟอร์มอยู่ในบรรทัดหรือไม่
โต๊ะ	วัตถุ	เท็จ	-	หากโครงสร้างตารางไม่เป็นไปตามโครงสร้างของแบบฟอร์ม คุณสามารถระบุได้ เช่น { name: 'name' }
การกระทำ	อาร์เรย์	เท็จ	['create', 'destroy', 'update']	การกระทำที่โหดร้าย
กำลังโหลด	บูลีน	เท็จ	false	CRUD อยู่ในสถานะ XHR ปุ่มส่งถูกปิดใช้งานหากเป็นจริง
เน้น CurrentRow	บูลีน	เท็จ	false	เน้นแถวปัจจุบันของตารางหรือไม่
แถวสไตล์	การทำงาน	เท็จ	-	ฟังก์ชันสไตล์แถวของตาราง Function(row, index)

เหตุการณ์ต่างๆ	คำอธิบาย
เปิด	กล่องโต้ตอบเปิดเหตุการณ์ ตั้งค่า editing เป็นจริงเพื่อแสดงกล่องโต้ตอบ
ปิด	เหตุการณ์การปิดกล่องโต้ตอบ ตั้งค่า editing เป็นเท็จเพื่อปิดกล่องโต้ตอบ
สร้าง	form create event คุณต้องกำหนด form model ให้กับ form
อัปเดต	เหตุการณ์การอัพเดตแบบฟอร์ม (row, index) ที่ส่งผ่านไปยังตัวจัดการ คุณต้องกำหนดแถวให้กับ form
ทำลาย	เหตุการณ์การทำลายแถวของตาราง (row, index) ส่งผ่านไปยังตัวจัดการ
ส่ง	เหตุการณ์การส่งแบบฟอร์ม (status, closeDialog) closeDialog ส่งผ่านไปยังตัวจัดการ 0 หมายถึงการสร้าง และ 1 หมายถึงการอัปเดต
ขยาย	เหตุการณ์การขยายตาราง (row, expanded) ส่งผ่านไปยังตัวจัดการ ดูเหตุการณ์ตาราง element-ui
คลิกแถว	เหตุการณ์การคลิกแถวของตาราง (row, event, column) ที่ส่งผ่านไปยังตัวจัดการ ดูเหตุการณ์ตาราง element-ui
แถว-dblclick	เหตุการณ์ dblclick แถวของตาราง (row, event) ส่งผ่านไปยังตัวจัดการ ดูเหตุการณ์ตาราง element-ui

สล็อต	คำอธิบาย
ดัชนี	ช่องดัชนีแถวของตาราง ดูช่องตาราง element-ui
ขยาย	ช่องขยายตาราง ดูช่องตาราง element-ui
เติมหน้า	ช่องเติมหน้าตาราง
ค่าเริ่มต้น	ช่องต่อท้ายตาราง
ส่วนเสริม	สร้างช่องเสริม

เทมเพลตของคุณอาจมีลักษณะเช่นนี้

 <crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
    :editing="editing" @open="handleOpen" @close="handleClose"
    @create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>

นี่คือมิกซ์อินง่ายๆ ที่อาจช่วยคุณในการบูตมัน เพียงนำเข้า Simple .

 import { Simple } from 'vue-element-crud'

export {
  mixins : [ Simple ]
} 

มีส่วนช่วย

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