wl vue select ดาวน์โหลด - wl vue select การดาวน์โหลดซอร์สโค้ด

wl vue select

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

wl-vue-select, wl-tree-select

การแนะนำ

กล่องดรอปดาวน์แบบทรีและกล่องดรอปดาวน์ธรรมดาพร้อมตัวเลือกทั้งหมดสำหรับกรอบงาน vue
กล่องดรอปดาวน์แบบทรีสำหรับกรอบงาน vue และกล่องดรอปดาวน์ธรรมดาพร้อมตัวเลือกทั้งหมด
ส่วนประกอบนี้มีกล่องดรอปดาวน์ที่เลือกทั้งหมดและกล่องดรอปดาวน์แบบต้นไม้
wlVueSelect เป็นกล่องดรอปดาวน์แบบห่อหุ้มรองตามองค์ประกอบ el-select ของ elementUi ซึ่งมีฟังก์ชันการเลือกทั้งหมดและฟังก์ชันการเลือกเริ่มต้น
wlTreeSelect เป็นกล่องดรอปดาวน์แบบห่อหุ้มรองตามองค์ประกอบ el-tree ของ elementUi ซึ่งให้การสนับสนุนข้อมูลต้นไม้และฟังก์ชันการเลือกเริ่มต้น
เนื่องจากความต้องการทั้งสองนี้เป็นเรื่องธรรมดามาก จึงเผยแพร่เป็นปลั๊กอินแยกต่างหาก
el-เลือก

การเข้าถึงออนไลน์

บันทึกการเปิดตัวหลัก

0.4.8 แก้ไขปัญหาที่ไม่สามารถยกเลิกโหนดหลักได้เมื่อเลือกโหนดย่อยทั้งหมดในกล่องแบบเลื่อนลงแบบต้นไม้

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

npm i wl-vue-select --save

หรือ

npm i wl-vue-select -S

ใช้

 import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);

    <wlVueSelect
      v-model="value"
      :props="props"
      :data="data"
      multiple
      default-select
    ></wlVueSelect>
    <p>----------分割线------------</p>
    <wlTreeSelect
      leaf
      width="240"
      checkbox
      :data="treeData"
      @change="hindleChanged"
      v-model="selected"
    ></wlTreeSelect>

 data() {
    return {
      value: [], // 选中值
      data: [
        {
          id: 1,
          name: "海边"
        },
        {
          id: 2,
          name: "森林"
        },
        {
          id: 3,
          name: "草原"
        },
        {
          id: 4,
          name: "古城"
        }
      ], // 数据
      props: {
        label: "name",
        value: "id"
      }, // 配置
      treeData: [
        {
          id: "love",
          name: "所有和你走过的风光",
          children: [
            {
              id: 1,
              name: "海边",
              children: [
                {
                  id: 5,
                  name: "蓬莱",
                }
              ]
            },
            {
              id: 2,
              name: "森林"
            },
            {
              id: 3,
              name: "草原"
            },
            {
              id: 4,
              name: "古城"
            }
          ]
        }
      ],
      selected: [ "1" ]// 树下拉框选中数据
    };
  },
  methods: {
    hindleChanged(val){
      console.log(val,2)
      console.log(this.selected)
    }
  },

เอกสาร

หมายเลขซีเรียล	พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าที่ไม่บังคับ	ค่าเริ่มต้น
1	ข้อมูล	ตัวเลือกข้อมูลรายการเสริม	อาร์เรย์	-	-
2	อุปกรณ์ประกอบฉาก	รายการการกำหนดค่า: ฟิลด์ป้ายกำกับที่แสดงชื่อและฟิลด์ค่าที่ผูกค่า	วัตถุ	-	{ ป้ายกำกับ: "ป้ายกำกับ" ค่า: "ค่า" }
3	แสดงทั้งหมด	แสดงตัวเลือก`全选`เมื่อมีตัวเลือกให้เลือกมากกว่าสองสามตัว	ตัวเลข	-	1
4	defaultSelect[ล้าสมัย]	ไม่ว่าจะเปิดใช้งานการเลือกเริ่มต้นหรือไม่ หากเปิดใช้`全部`ระบบจะเลือกทั้งหมด หากไม่ใช่ทั้งหมด ระบบจะเลือกรายการแรก (โปรดอย่ากำหนดค่าเริ่มต้นให้กับ v-model เมื่อเปิดใช้งานฟังก์ชันนี้)	บูลีน	-	เท็จ
5	อื่น	พารามิเตอร์อื่นๆ จัดทำโดย el-select	-	-	-
6	โหนดคีย์	เมื่อใช้กล่องแบบเลื่อนลงแบบต้นไม้ คุณต้องใช้คีย์เพื่อแยกวิเคราะห์ข้อมูล	สตริง	-	บัตรประจำตัวประชาชน
7	เลือกแล้ว[ล้าสมัย]	เมื่อใช้กล่องดรอปดาวน์แบบต้นไม้ ให้ผูกข้อมูลที่เลือก [ตอนนี้เปลี่ยนเป็น v-model]	สตริง-หมายเลข-อาร์เรย์-วัตถุ	-	-
8	ช่องทำเครื่องหมาย	เมื่อใช้กล่องแบบเลื่อนลงแบบต้นไม้ ไม่ว่าจะเปิดใช้งานการเลือกหลายรายการหรือไม่	บูลีน	-	เท็จ
9	ความกว้าง	ความกว้างเมื่อใช้กล่องแบบเลื่อนลงแบบต้นไม้ หน่วยเริ่มต้นคือ px	สตริง-หมายเลข	-	240
10	ใบไม้	ในกล่องดรอปดาวน์แบบต้นไม้ ว่าจะเลือกได้เฉพาะโหนดใบเท่านั้นหรือไม่	บูลีน	-	เท็จ
11	สิ่งกระตุ้น	เมื่อใช้กล่องแบบหล่นลงแบบต้นไม้ วิธีการทริกเกอร์	สตริง	คลิก/โฟกัส/โฮเวอร์/แมนนวล	คลิก
12	v-รุ่น	ค่าการเชื่อมโยงกล่องแบบหล่นลงแบบปกติและแบบต้นไม้จะใช้เหมือนกับองค์ประกอบของแบบฟอร์มทั่วไป	สตริง-หมายเลข-อาร์เรย์-วัตถุ	-	-
13	พิการ	ไม่ว่าจะปิดการใช้งานกล่องแบบเลื่อนลง	บูลีน	-	เท็จ
14	ตอนนี้แรป	ว่าจะไม่อนุญาตให้แสดงหลายบรรทัดหรือไม่ หากเป็นจริง จะแสดงเพียงบรรทัดเดียวเท่านั้น	บูลีน	-	เท็จ
15	ไม่มีการตรวจสอบปิด	เมื่อมีการเลือกหลายรายการ จะปิดพื้นที่ตัวเลือกโดยอัตโนมัติเมื่อไม่ได้เลือกทั้งหมดหรือไม่	บูลีน	-	เท็จ
16	ขนาด	ขนาดการใช้งานเหมือนกับ elementui	สตริง	-	ปานกลาง
17	ค่าเริ่มต้นExpandAll	ในรูปแบบต้นไม้ว่าจะขยายตัวเลือกทั้งหมดตามค่าเริ่มต้นหรือไม่	บูลีน	-	จริง
18	ค่าเริ่มต้นExpandedKeys	ในรูปแบบต้นไม้ คีย์โหนดจะถูกขยายตามค่าเริ่มต้น	อาร์เรย์	-	-
19	กรองได้	ไม่ว่าจะเปิดใช้งานฟังก์ชั่นการค้นหา (เมื่อเพิ่มกล่องดรอปดาวน์แบบต้นไม้จะมีฟังก์ชั่นเหมือนกับกล่องดรอปดาวน์ธรรมดา)	บูลีน	-	เท็จ
20	ตัวกรองFnc	ในรูปทรงต้นไม้ คุณสามารถเลือกปรับแต่งตรรกะการค้นหาได้ หากไม่ผ่าน การค้นหาจะขึ้นอยู่กับฟิลด์ที่สอดคล้องกับป้ายกำกับในอุปกรณ์ประกอบฉาก ฟังก์ชั่น (ค่าข้อมูล)	การทำงาน	-	-
ยี่สิบเอ็ด	ตรวจสอบอย่างเคร่งครัด	ในรูปต้นไม้ไม่ว่าพ่อแม่กับลูกจะไม่เกี่ยวข้องกันก็ตาม	บูลีน	-	เท็จ
ยี่สิบสอง	ขยาย OnClickNode	ในรูปทรงต้นไม้ ไม่ว่าการคลิกบนโหนดจะสามารถขยายหรือย่อขนาดได้ก็ตาม	บูลีน	-	เท็จ
ยี่สิบสาม	ตรวจสอบ OnClickNode	ไม่ว่าจะเลือกโหนดเมื่อคลิกที่โหนด ค่าเริ่มต้นจะเป็นเท็จ นั่นคือ โหนดจะถูกเลือกเมื่อมีการคลิกกล่องกาเครื่องหมายเท่านั้น	บูลีน	-	เท็จ

วิธีการ

หมายเลขซีเรียล	ชื่อ	แสดงให้เห็น	พารามิเตอร์
1	ปิดตัวเลือก	ปิดพื้นที่ตัวเลือกของกล่องแบบเลื่อนลงแบบต้นไม้	-

บันทึกเวอร์ชัน

0.5.8 เพิ่มการกำหนดค่าแบบแยกจากผู้ปกครองและลูกในกล่องแบบเลื่อนลงแบบต้นไม้

0.5.5 แก้ไขข้อผิดพลาดในการเลือกอัตโนมัติเมื่อค่าการเชื่อมโยงเริ่มต้นของกล่องแบบเลื่อนลงแบบต้นไม้เป็นอาร์เรย์แบบง่าย แก้ไขรูปแบบการจัดกึ่งกลางแนวตั้ง

0.5.4 แก้ไขปัญหาที่เมื่อเลือกข้อมูลทั้งหมดแล้ว แต่ละรายการจะแสดงอยู่ในพื้นที่แสดงผลแทนที่จะแสดง 'ทั้งหมด' เพิ่มฟังก์ชันการแนะนำสคริปต์

0.5.3 ปรับชื่อส่วนประกอบเป็นโคกใหญ่ เพิ่มการแนะนำตามความต้องการ

0.5.2 ปรับช่องแบบเลื่อนลงแผนผังและเพิ่มการค้นหาและฟังก์ชันการค้นหาที่กำหนดเอง

0.5.1 ปรับช่องแบบเลื่อนลงของแผนผังให้เหมาะสม และตัวเลือกจะแสดงเอฟเฟกต์ที่มากเกินไป

0.5.0 เพิ่มกล่องแบบหล่นลงของต้นไม้ defaultExpandAll, defaultExpandedKeys ฟิลด์

0.4.9 เพิ่มวิธีการ closeOptions สำหรับการปิดพื้นที่ตัวเลือกของกล่องดรอปดาวน์แผนผัง

0.4.8 แก้ไขปัญหาที่ไม่สามารถยกเลิกโหนดหลักได้เมื่อเลือกโหนดย่อยทั้งหมดในกล่องแบบเลื่อนลงแบบต้นไม้

0.4.7 เพิ่มประสิทธิภาพกล่องแบบเลื่อนลงแบบต้นไม้และสนับสนุนแท็กการยุบของ el-select

0.4.6 ปรับช่องแบบเลื่อนลงของต้นไม้ให้เหมาะสมและทำให้แอตทริบิวต์ขนาดมีประสิทธิภาพ

0.4.5 ปรับตัวยึดตำแหน่งกล่องดรอปดาวน์แบบต้นไม้และเพิ่มการจัดการพารามิเตอร์เพื่อปิดตัวเลือกเมื่อไม่ได้เลือกทั้งหมด

0.4.2 ปรับช่องแบบเลื่อนลงของแผนผังและเพิ่มว่าจะไม่อนุญาตให้มีฟิลด์หลายแถวหรือไม่

0.4.1 ปรับช่องแบบเลื่อนลงแผนผังและเพิ่มฟิลด์ที่ปิดใช้งาน

0.3.9 ปรับช่องแบบเลื่อนลงของแผนผังให้เหมาะสมเพื่อแยกรหัสตามค่าเริ่มต้นเมื่อข้อมูลที่เลือกส่งผ่านเป็นอาร์เรย์ที่ซับซ้อน

0.3.8 แก้ไขปัญหาที่เมื่อกล่องแบบเลื่อนลงแผนผังถูกเลือกหลายรายการ เฉพาะพื้นที่แสดงผลเท่านั้นที่ถูกล้าง แต่กล่องกาเครื่องหมายต้นไม้จะไม่ถูกล้างเมื่อข้อมูลว่างเปล่า

0.3.7 ปรับเปลี่ยนว่าจะเลือกเฉพาะโหนดย่อยตามฟิลด์ใบไม้หรือไม่ เมื่อเลือกกล่องดรอปดาวน์แผนผังต้นไม้

0.3.5 แก้ไขข้อบกพร่องของการเลือกเริ่มต้นในการเลือกวิทยุกล่องแบบเลื่อนลงแบบต้นไม้ [เมื่อค่าที่ถูกผูกไว้เป็นอาร์เรย์]

0.3.4 แก้ไขปัญหาที่ฟิลด์ที่เลือกเริ่มต้นของกล่องดรอปดาวน์แผนผัง el-tree ว่างเปล่า และเมธอด getNodes สามารถรับค่าสุดท้ายด้วยตัวอย่าง rademe

0.3.3 แก้ไขปัญหาการวนซ้ำไม่สิ้นสุดเมื่อเปิดใช้งานการเลือกหลายรายการในกล่องดรอปดาวน์แผนผัง และปรับฟิลด์ leaf ให้เหมาะสมเพื่อพิจารณาว่าจะส่งคืนเฉพาะโหนดปลายสุดเมื่อเปิดใช้งานการเลือกหลายรายการหรือไม่

0.3.2 แก้ไขปัญหาที่กล่องดรอปดาวน์แผนผังไม่แสดงเมื่อขยายในแนวนอน

0.3.0 ปรับช่องแบบเลื่อนลงของแผนผังและเพิ่มฟิลด์โหมดการแสดงผลทริกเกอร์

0.2.7 เมื่อปรับตัวเลือกแบบเลื่อนลงของต้นไม้เพียงรายการเดียว ระดับทางเลือกจะถูกเพิ่ม และพารามิเตอร์ leaf จะถูกเพิ่มเพื่อตั้งค่าว่าสามารถเลือกได้เฉพาะโหนดใบเท่านั้น เมื่อตัวเลือกของต้นไม้ถูกปรับให้เหมาะสมแล้ว การไฮไลต์ เอฟเฟกต์เมื่อเลือกประเภทวัตถุตามค่าเริ่มต้น

0.2.5 ปรับอัลกอริธึมการกรองกล่องดรอปดาวน์แบบต้นไม้ให้เหมาะสม ปรับช่องแบบเลื่อนลงแบบต้นไม้ให้เหมาะสมเพื่อเพิ่มเอฟเฟกต์การเลื่อนเมื่อตัวเลือกที่มีอยู่ยาวเกินไป