wl vue select تنزيل - wl vue select تنزيل كود المصدر

wl vue select

فئات أخرى

1.0.0

تنزيل

wl-vue-select، wl-tree-select

مقدمة

مربع الشجرة المنسدل والمربع المنسدل العادي مع كل التحديدات لإطار عمل vue.
مربع منسدل على شكل شجرة لإطار عمل vue ومربع منسدل عادي مع تحديد الكل.
يوفر هذا المكون وظائف المربع المنسدل لتحديد الكل والمربع المنسدل للشجرة.
wlVueSelect هو مربع منسدل مغلف ثانوي يعتمد على مكون التحديد el elementUi، والذي يوفر وظائف التحديد الكامل ووظائف التحديد الافتراضية؛
wlTreeSelect هو مربع منسدل ثانوي مغلف يعتمد على مكون el-tree الخاص بـ elementUi، والذي يوفر دعمًا لبيانات الشجرة ووظائف التحديد الافتراضية؛
نظرًا لأن هذين الحاجتين شائعان جدًا، فقد تم إصدارهما كمكون إضافي منفصل.
التحديد

الوصول عبر الإنترنت

سجلات الإصدار الرئيسية

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	showTotal	قم بعرض خيار`全选`عندما يكون هناك أكثر من عدد قليل من الخيارات المتاحة	رقم	-	1
4	اختر الافتراضي[عفا عليه الزمن]	ما إذا كان سيتم تمكين التحديد الافتراضي، إذا تم تمكين`全部`، فسيتم تحديد الكل، إن لم يكن الكل، سيتم تحديد الأول. (يُرجى عدم تعيين قيمة أولية لـ v-model عند تمكين هذه الوظيفة)	منطقية	-	خطأ شنيع
5	آخر	المعلمات الأخرى المقدمة من el-select	-	-	-
6	nodeKey	عند استخدام مربع الشجرة المنسدل، يجب عليك استخدام المفتاح لتحليل البيانات	خيط	-	بطاقة تعريف
7	محدد[عفا عليه الزمن]	عند استخدام مربع القائمة المنسدلة للشجرة، قم بربط البيانات المحددة [تم التغيير الآن إلى v-model]	سلسلة-رقم-مصفوفة-كائن	-	-
8	خانة الاختيار	عند استخدام مربع القائمة المنسدلة للشجرة، حدد ما إذا كان سيتم تمكين التحديد المتعدد أم لا	منطقية	-	خطأ شنيع
9	عرض	العرض عند استخدام مربع الشجرة المنسدل، الوحدة الافتراضية هي px	رقم السلسلة	-	240
10	ورقة	في المربع المنسدل للشجرة، ما إذا كان يمكن تحديد العقد الورقية فقط	منطقية	-	خطأ شنيع
11	مشغل	عند استخدام مربع الشجرة المنسدل، يتم استخدام طريقة التشغيل	خيط	انقر / التركيز / تحوم / يدوي	انقر
12	نموذج v	يتم استخدام قيم ربط المربع المنسدل العادي والشجرة مثل عناصر النموذج العادية.	سلسلة-رقم-مصفوفة-كائن	-	-
13	عاجز	ما إذا كان سيتم تعطيل المربع المنسدل أم لا	منطقية	-	خطأ شنيع
14	com.nowrap	ما إذا كان سيتم عدم السماح بعرض أسطر متعددة أم لا، إذا كان هذا صحيحًا، فسيتم عرض سطر واحد فقط.	منطقية	-	خطأ شنيع
15	noCheckedClose	عند إجراء تحديدات متعددة، ما إذا كان سيتم إغلاق منطقة الخيارات تلقائيًا عندما تكون جميعها غير محددة	منطقية	-	خطأ شنيع
16	مقاس	الحجم والاستخدام هو نفس Elementui	خيط	-	واسطة
17	defaultExpandAll	في شكل شجرة، ما إذا كان سيتم توسيع كافة الخيارات بشكل افتراضي	منطقية	-	حقيقي
18	defaultExpandedKeys	في شكل شجرة، يتم توسيع مفاتيح العقدة بشكل افتراضي.	صفيف	-	-
19	قابل للتصفية	ما إذا كان سيتم تمكين وظيفة البحث (عند إضافة مربع قائمة منسدلة على شكل شجرة، يكون له نفس وظيفة المربع المنسدل العادي)	منطقية	-	خطأ شنيع
20	filterFnc	في شكل الشجرة، يمكنك تخصيص منطق البحث بشكل اختياري. إذا لم يتم تمريره، فسيعتمد البحث على الحقل المقابل للتسمية في الدعائم. الوظيفة (القيمة، البيانات)	وظيفة	-	-
واحد وعشرون	checkStrictly	في شكل شجرة، سواء كان الوالد والطفل غير مرتبطين	منطقية	-	خطأ شنيع
إثنان وعشرون	توسيع OnClickNode	في شكل شجرة، سواء كان النقر على العقدة يمكن توسيعها أو تقليصها	منطقية	-	خطأ شنيع
ثلاثة وعشرين	checkOnClickNode	ما إذا كان سيتم تحديد العقدة عند النقر فوق العقدة، فإن القيمة الافتراضية هي خطأ، أي أنه سيتم تحديد العقدة فقط عند النقر فوق خانة الاختيار	منطقية	-	خطأ شنيع

طُرق

رقم سري	اسم	يوضح	المعلمة
1	CloseOptions	أغلق منطقة الخيارات في مربع الشجرة المنسدل	-

سجل الإصدار

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 لتعيين ما إذا كان يمكن تحديد العقد الورقية فقط. عند تحسين التحديد الفردي للشجرة، يتم التمييز تأثير عندما يتم تحديد نوع الكائن بشكل افتراضي