el-tree-fransfer هو مكون صندوق مكوك شجرة يعتمد على VUE و element-ui. يرجى التأكد من إدخال element-ui قبل استخدامه! تشبه وظيفة هذا المكون وظيفة النقل في element-ui
، لكن البيانات الموجودة بداخله عبارة عن بنية شجرية! في الواقع، مكونات واجهة المستخدم التي يعتمد عليها el-tree-transfer هي Checkbox، Button، وعنصر التحكم الرئيسي في Tree Tree! وهو ليس امتدادًا لمكون صندوق المكوك الخاص بعنصر واجهة المستخدم، ولكنه يشير فقط إلى مظهره وأسلوبه ووظيفته.
نظرًا لأن أعمال الشركة تستخدم إطار عمل Vue، فإن مكتبة واجهة المستخدم تستخدم عنصر ui. من الصعب العثور على مكون مفيد لصندوق نقل شجرة Vue في السوق، ولا نريد تقديم مكونات إضافية ثقيلة الوزن خارج عنصر واجهة المستخدم فقط بسبب صندوق النقل، لذلك هناك نقل شجرة. خفيف الوزن، وسهل الاستخدام، ولا يتطلب أي تكاليف تعليمية إضافية.
2.4.6 إصلاح خطأ إعادة الإعمار (يرجى عدم استخدام 2.4.0-2.4.5)؛ وإضافة ثلاثة أوضاع غير مرتبطة بالأب والابن (بما في ذلك وضع التفويض)؛ وإعادة بناء خوارزمية المكوك؛ تم تحسين الاختبار التقريبي للبيانات التجريبية بشكل كبير؛ تحسين اختيار الكل عندما لا يكون الوالد والطفل مرتبطين الحدث addBtn هو add-btn، وremoveBtn هو Remove-btn؛ أضف فتحة عقدة مخصصة؛ وظيفة المكوك غير المرتبطة بين الوالدين والطفل
2.3.3 تعديل منطق مطابقة المكوك؛ إضافة معلمة rootPidValue. راجع ملاحظات الإصدار أدناه للحصول على تعليمات مفصلة
قم أولاً بتنزيل المكون الإضافي npm
npm install el-tree-transfer --save
أو
npm i el-tree-transfer -S
ثم يمكنك استخدام el-tree-transfer كمكون عادي
< template >
< div >
// 你的代码
...
// 使用树形穿梭框组件
< tree-transfer : title = " title " :from_data='fromData' :to_data='toData' :defaultProps=" { label: 'label' } " @add-btn='add' @remove-btn='remove' :mode='mode' height='540px' filter openAll>
</ tree - transfer >
< / div >
</ template >
< script >
import treeTransfer from 'el-tree-transfer' // 引入
export defult {
data ( ) {
return : {
mode : "transfer" , // transfer addressList
fromData : [
{
id : "1" ,
pid : 0 ,
label : "一级 1" ,
children : [
{
id : "1-1" ,
pid : "1" ,
label : "二级 1-1" ,
disabled : true ,
children : [ ]
} ,
{
id : "1-2" ,
pid : "1" ,
label : "二级 1-2" ,
children : [
{
id : "1-2-1" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-1"
} ,
{
id : "1-2-2" ,
pid : "1-2" ,
children : [ ] ,
label : "二级 1-2-2"
}
]
}
]
} ,
] ,
toData : [ ]
}
} ,
methods: {
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode ( ) {
if ( this . mode == "transfer" ) {
this . mode = "addressList" ;
} else {
this . mode = "transfer" ;
}
} ,
// 监听穿梭框组件添加
add ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时,返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时,返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
} ,
// 监听穿梭框组件移除
remove ( fromData , toData , obj ) {
// 树形穿梭框模式transfer时,返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时,返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console . log ( "fromData:" , fromData ) ;
console . log ( "toData:" , toData ) ;
console . log ( "obj:" , obj ) ;
}
} ,
components : { treeTransfer } // 注册
}
</ script >
< style >
...
</ style >
رقم سري | المعلمة | يوضح | يكتب | القيمة الافتراضية | تجديد |
---|---|---|---|---|---|
1 | عرض | عرض | خيط | 100% | يوصى بضبط عرض وموضع الصندوق الخارجي |
2 | ارتفاع | عالي | خيط | 320 بكسل | - |
3 | عنوان | عنوان | خيط | ["قائمة المصادر"، "قائمة الأهداف"] | - |
4 | Button_text | اسم الزر | صفيف | - | - |
5 | from_data | بيانات المصدر | صفيف | - | تنسيق البيانات هو نفس مكون شجرة واجهة المستخدم، ولكن يجب أن يحتوي على معرف ورقم تعريف المنتج |
6 | to_data | البيانات المستهدفة | صفيف | - | تنسيق البيانات هو نفس مكون شجرة واجهة المستخدم، ولكن يجب أن يحتوي على معرف ورقم تعريف المنتج |
7 | defaultProps | عناصر التكوين - مثل الدعائم في el-tree | هدف | { التسمية: "التسمية"، الأطفال: "الأطفال"، isLeaf: "ورقة"، تعطيل: "تعطيل" } | الاستخدام هو نفس الدعائم شجرة |
8 | node_key | قم بتخصيص قيمة مفتاح العقدة، القيمة الافتراضية هي المعرف | خيط | بطاقة تعريف | ويجب أن يكون متوافقًا مع اسم معلمة المعرف في بيانات الشجرة ويجب أن يكون فريدًا. |
9 | معرف الهوية | تخصيص اسم معلمة pid، الافتراضي هو "pid" | خيط | معرف الهوية | اقترح بعض مستخدمي الإنترنت أن اسم الحقل الذي توفره الخلفية لا يسمى pid، لذلك تمت إضافة دعم مخصص. |
10 | leafOnly | متروك | - | - | - |
11 | فلتر | ما إذا كان سيتم تمكين وظيفة التصفية | منطقية | خطأ شنيع | يتم التصفية بناءً على حقل التسمية الخاص بمعلمة defaultProps |
12 | openAll | ما إذا كان سيتم توسيع الكل بشكل افتراضي | منطقية | خطأ شنيع | هناك مشكلة في الأداء |
13 | عقدة الشجرة المخصصة، الاستخدام هو نفس استخدام شجرة واجهة المستخدم | وظيفة | - | ينقسم الإصدار 2.2.3 إلى وظيفتين لتحديد العقد المخصصة على الجانبين الأيسر والأيمن على التوالي. | |
14 | وضع | ضبط وضع صندوق المكوك | خيط | تحويل | الوضع الافتراضي هو وضع النقل، وهو وضع النقل الشجري، والحقل القابل للتكوين هو قائمة العناوين ويمكن تغييره إلى وضع دفتر العناوين، ولا يمكن تخصيص اسم الزر إذا كنت تريد تخصيص اسم العنوان ، ما عليك سوى تمرير أربع قيم في مصفوفة العنوان، في وضع قائمة العناوين، يكون العنوان الافتراضي هو دفتر العناوين، والمستلم، والشخص نسخة كربونية، والشخص نسخة كربونية أعمى. |
15 | TransferOpenNode | ما إذا كان سيتم توسيع عقد المكوك بعد المكوك | منطقية | حقيقي | الافتراضي هو صحيح، مما يعني أنه سيتم توسيع العقدة المكوكية للفحص البصري. تتم إضافة هذه المعلمة لأنه ستكون هناك مشاكل تأخر واضحة في التوسيع عندما تكون كمية البيانات كبيرة، ومع ذلك، لاحظ أنه إذا تم تعيين هذه المعلمة على خطأ لن يتم توسيعها بعد المكوك. بعد كل شيء، من المستحيل تحديد الطبقة التي ستكون هناك بيانات ضخمة |
16 | defaultCheckedKeys | العقدة المحددة بشكل افتراضي | صفيف | خطأ شنيع | يطابق فقط العقدة الافتراضية الأولية ولن يغير العقدة الافتراضية ديناميكيًا بعد تشغيلها. |
17 | العنصر النائب | قم بتعيين مطالبات مربع البحث | خيط | أدخل الكلمات الرئيسية للتصفية | - |
18 | defaultTransfer | ما إذا كان سيتم النقل تلقائيًا مرة واحدة إلى العقدة مع تحديد defaultCheckedKeys افتراضيًا | منطقية | خطأ شنيع | يستخدم لتلبية احتياجات المستخدمين الذين لا يريدون تقسيم البيانات إلى fromData وtoData. |
19 | arayToTree | ما إذا كان سيتم تمكين تحويل المصفوفات أحادية البعد إلى هياكل شجرية | منطقية | خطأ شنيع | يجب أن تحتوي البيانات على عقدة جذر وألا يتم كسرها للحصول على تفاصيل حول تنسيق البيانات، راجع app.vue على github. وفقًا للعلاقة المقابلة بين المعرف وPID، هناك مشكلات معينة في الأداء عند التحويل. |
20 | AddressOptions | عناصر تكوين وضع دفتر العناوين | هدف | {الرقم: الرقم، اللاحقة: السلسلة، الموصل: السلسلة} | num-> عدد دفاتر العناوين المطلوبة على الجانب الأيمن، الافتراضي هو 3 لاحقة-> الحقل الذي تريد لصقه بعد التسمية (مثل المعرف، أي خذ معرف هذه البيانات ولصقه في الخلف الافتراضي هو موصل اللاحقة -> الموصل (السلسلة) الافتراضي-). |
واحد وعشرون | كسول | ما إذا كان سيتم تمكين التحميل البطيء | منطقية | خطأ شنيع | التأثير هو التحميل البطيء لـ el-tree ولا يمكن استخدامه في نفس الوقت مع openAll أو التوسيع الافتراضي. |
إثنان وعشرون | كسالىFn | وظيفة رد الاتصال التحميل البطيء | وظيفة | - | عند استخدام Lazy، يجب تمرير وظيفة رد الاتصال، على سبيل المثال: LazyFn='loadNode'، معلمة الإرجاع LoadNode(node, Resolve, from)، العقدة->عقدة العقدة الموسعة حاليًا، حل->حل التحميل البطيء، من -> يسار/يمين يشير إلى أن رد الاتصال يأتي من الجانب الأيسر/الأيمن |
ثلاثة وعشرين | عالية الإضاءة | ما إذا كان سيتم تمييز العقدة المحددة حاليًا أم لا | منطقية | خطأ شنيع | - |
أربعة وعشرون | filterNode | وظيفة البحث المخصصة | وظيفة | - | إذا لم يتم تمريره، فستتم تصفية الإعداد الافتراضي استنادًا إلى حقل التسمية الخاص بمعلمة defaultProps. |
25 | defaultExpandedKeys | قم بتوسيع العقد بشكل افتراضي | صفيف | - | سيتم إلغاء تكرار مصفوفة معرف العقدة المراد توسيعها تلقائيًا على الجانبين الأيسر والأيمن. |
26 | lazyRight | في الإصدار 2.2.9، تسري السمة البطيئة فقط على الجانب الأيسر من الشجرة، إذا كنت بحاجة إلى الجانب الأيمن، فاستخدم التحميل البطيء -> LazyRight. | منطقية | - | - |
27 | sjr | وضع دفتر العناوين، قم بتعيين بيانات المستلم على اليمين | صفيف | - | - |
28 | المسؤولية الاجتماعية للشركات | وضع دفتر العناوين، قم بتعيين نسخة بيانات الشخص الكربونية على اليمين | صفيف | - | - |
29 | السيد | وضع دفتر العناوين، قم بتعيين نسخة بيانات الشخص العمياء على اليمين | صفيف | - | - |
30 | rootPidValue | وضع صندوق المكوك، قيمة معرف بيانات العقدة الجذرية، المستخدمة لمطابقة حلقة الخروج، مهمة | سلسلة، رقم | 0 | - |
31 | checkStrictly | ما إذا كان الأب والابن ليسا مرتبطين | منطقية | خطأ شنيع | هذا الوضع لا يدعم الكسولة. البيانات التي تم إرجاعها من البيانات وtoData هي أحدث البيانات، والمفاتيح والعقد في obj غير مكتملة. وهناك اختلافات في منطق المعالجة للجانبين الأيسر والأيمن للعقدة الأصلية بعد حذف العقدة الفرعية: نظرًا لأنها ستظهر على اليمين عند التفويض، فيجب أن تكون العقدة الأصلية اليسرى مطلوبة، وعند حذف التفويض، قم بإزالة العقدة الفرعية الأذونات لا تعني أنك تريد إزالة الأذونات الأصل. |
32 | renderAfterExpand | ما إذا كان سيتم عرض العقد الفرعية بعد توسيع عقدة الشجرة للمرة الأولى | منطقية | حقيقي | - |
33 | توسيع OnClickNode | ما إذا كان سيتم توسيع العقد أو تقليصها عند النقر عليها | منطقية | حقيقي | - |
34 | checkOnClickNode | ما إذا كان سيتم تحديد العقدة عند النقر عليها | منطقية | خطأ شنيع | - |
35 | مسافة بادئة | مسافة بادئة أفقية بين عقد المستوى المتجاورة، بالبكسل | رقم | 16 | - |
36 | فئة الأيقونات | تخصيص الرموز لعقد الشجرة | خيط | - | - |
37 | قابلة للسحب | ما إذا كان سيتم تمكين وظيفة عقدة السحب والإفلات | منطقية | خطأ شنيع | - |
38 | السماح بالسحب | تحديد ما إذا كان يمكن سحب العقدة | الوظيفة (العقدة) | - | - |
39 | السماح بالإسقاط | تحديد ما إذا كان يمكن وضع العقدة المستهدفة عند السحب | الوظيفة (عقدة السحب، عقدة الإسقاط، النوع) | - | تحتوي معلمة النوع على ثلاث حالات: "السابق"، و"الداخلي"، و"التالي"، والتي تعني على التوالي الوضع قبل العقدة المستهدفة، والإدراج في العقدة المستهدفة، والوضع بعد العقدة المستهدفة. |
40 | checkStrictlyType | هناك ثلاثة أوضاع لا تتعلق بالأب والابن: وضع التفويض، ووضع الدمية، ووضع كتلة البناء المعيارية. | خيط | التفويض: سيؤدي تحديد عقدة فرعية على اليسار إلى إحضار العقدة الأصلية تلقائيًا، وسيؤدي تحديد العقدة الأصلية على اليمين إلى إحضار العقدة الفرعية نفسها على كلا الجانبين من هذا الوضع: لا يرتبط مكوك الطفل، ولكن يجب الحفاظ على هيكل الشكل للشجرة الكاملة، فهو يقوم تلقائيًا بإحضار الأجزاء الضرورية فقط للمكوك إلى الجانب الآخر للربط. قد توجد نفس العقد غير الورقية على جانبي هذا الوضع؛ ولا تربط الوحدة النمطية بين الوالدين والطفل المكوك، ولا تحافظ على بنية شجرة كاملة مثل لبنات البناء، لتشكيل شكل شجرة على الجانب الأيمن ، يحتاج الجانب الأيسر إلى التفكيك، ويحتاج الجانب الأيسر إلى التفكيك. كلما كان هيكل الشجرة أكثر اكتمالًا، يضمن الجانبان الأيسر والأيمن لهذا النمط التفرد الصارم |
رقم سري | اسم الحدث | يوضح | معلمات رد الاتصال |
---|---|---|---|
1 | إضافة btn | تم تشغيل الحدث عند النقر فوق زر الإضافة (addBtn قبل 2.4.0) | وظيفة (fromData، toData، obj)، أوضاع نقل صندوق المكوك الشجري هي 1. البيانات اليسرى بعد الحركة، 2. البيانات الصحيحة بعد الحركة، 3. مفاتيح العقدة المنقولة، العقد، نصف المفاتيح، كائنات HalfNodes في الوضع، قائمة عناوين دفتر العناوين معلمات الإرجاع هي قائمة المستلمين الصحيحة، وقائمة النسخ الكربونية الصحيحة، وقائمة النسخ الكربونية العمياء اليمنى. |
2 | إزالة btn | تم تشغيل الحدث عند النقر فوق زر الإزالة (إزالة Btn قبل 2.4.0) | وظيفة (fromData، toData، obj)، أوضاع نقل صندوق المكوك الشجري هي 1. البيانات اليسرى بعد الحركة، 2. البيانات الصحيحة بعد الحركة، 3. مفاتيح العقدة المنقولة، العقد، نصف المفاتيح، كائنات HalfNodes في الوضع، قائمة عناوين دفتر العناوين معلمات الإرجاع هي قائمة المستلمين الصحيحة، وقائمة النسخ الكربونية الصحيحة، وقائمة النسخ الكربونية العمياء اليمنى. |
3 | تغيير الاختيار الأيسر | حدث التحقق من بيانات المصدر الأيسر | الوظيفة (nodeObj، TreeObj، checkAll) راجع قيمة إرجاع حدث التحقق من مكونات el-tree، تشير معلمة checkAll الجديدة إلى ما إذا تم تحديد الكل |
4 | حق الاختيار التغيير | حدث التحقق من بيانات الهدف الصحيح | الوظيفة (nodeObj، TreeObj، checkAll) راجع قيمة إرجاع حدث التحقق من مكونات el-tree، تشير معلمة checkAll الجديدة إلى ما إذا تم تحديد الكل |
5 | عقدة السحب البداية | يتم تشغيل الحدث عندما تبدأ العقدة في السحب | هناك 3 معلمات في المجمل، بالترتيب: "left"/"right"، والعقدة المقابلة للعقدة المسحوبة، والحدث |
6 | عقدة السحب أدخل | الأحداث التي يتم تشغيلها عند السحب إلى العقد الأخرى | هناك 4 معلمات في المجمل، بالترتيب: "left"/"right"، والعقدة المقابلة للعقدة المسحوبة، والعقدة المقابلة للعقدة المدخلة، والحدث |
7 | عقدة السحب إجازة | تم تشغيل الحدث عند السحب بعيدًا عن العقدة | هناك 4 معلمات في المجمل، بالترتيب: "left"/"right"، والعقدة المقابلة للعقدة المسحوبة، والعقدة المقابلة للعقدة اليسرى، والحدث |
8 | عقدة السحب | حدث يتم تشغيله عند سحب عقدة (مشابه لحدث تمرير الماوس في المتصفح) | هناك 4 معلمات في المجمل، بالترتيب: "left"/"right"، والعقدة المقابلة للعقدة المسحوبة، والعقدة المقابلة للعقدة المدخلة حاليًا، والحدث |
9 | عقدة السحب نهاية | حدث يتم تشغيله عند انتهاء السحب (قد لا يكون ناجحًا) | هناك 5 معلمات في المجمل، بالترتيب: "يسار"/"يمين"، العقدة المقابلة للعقدة المسحوبة، آخر عقدة تم إدخالها عند انتهاء السحب (قد تكون فارغة)، موضع موضع العقدة المسحوبة (قبل ، بعد، داخلي)، حدث |
10 | إسقاط العقدة | يتم تشغيل الحدث عند اكتمال السحب بنجاح | هناك 5 معلمات في المجمل، بالترتيب: "يسار"/"يمين"، العقدة المقابلة للعقدة المسحوبة، آخر عقدة تم إدخالها عند انتهاء السحب، موضع موضع العقدة المسحوبة (قبل، بعد، داخلي) ، حدث |
رقم سري | اسم | يوضح |
---|---|---|
1 | ClearChecked | امسح العقدة المحددة، امسح الكل بشكل افتراضي type:string left左边right右边all全部默认all |
2 | getChecked | الحصول على البيانات المحددة |
3 | setChecked | تعيين وظيفة البيانات المحددة (المفاتيح اليسرى = []، المفاتيح اليمنى = []) |
4 | ClearFilter | مسح شروط مربع البحث، مسح جميع الوظائف بشكل افتراضي (النوع: سلسلة) اليسار، اليسار، اليمين، الكل، الافتراضي الكل |
رقم سري | اسم | يوضح |
---|---|---|
1 | يساري | الفتحات السفلية اليمنى واليسرى لصندوق المكوك |
2 | التذييل الأيمن | الفتحات السفلية اليمنى واليسرى لصندوق المكوك |
3 | عنوان اليسار | محتوى مخصص على الجانبين الأيسر والأيمن من منطقة عنوان صندوق المكوك |
4 | حق العنوان | محتوى مخصص على الجانبين الأيسر والأيمن من منطقة عنوان صندوق النقل |
5 | استمارة | الفتحة العلوية لمنطقة المحتوى اليسرى |
6 | ل | الفتحة العلوية لمنطقة المحتوى على اليمين |
7 | محتوى اليسار | تخصيص عقدة الشجرة اليسرى |
8 | حق المحتوى | تخصيص عقدة الشجرة الصحيحة |
2.4.6 إصلاح خطأ إعادة الإعمار (يرجى عدم استخدام 2.4.0-2.4.5)؛ وإضافة ثلاثة أوضاع غير مرتبطة بالأب والابن (بما في ذلك وضع التفويض)؛ وإعادة بناء خوارزمية المكوك؛ تم تحسين الاختبار التقريبي للبيانات التجريبية بشكل كبير؛ تحسين اختيار الكل عندما لا يكون الوالد والطفل مرتبطين الحدث addBtn هو add-btn، وremoveBtn هو Remove-btn؛ أضف فتحة عقدة مخصصة؛ وظيفة المكوك غير المرتبطة بين الوالدين والطفل
2.3.3 قم بتغيير الخوارزمية للحكم على ما إذا كان هدف المكوك موجودًا بالفعل على الجانب الآخر لتجنب نتائج المطابقة غير المتوقعة للتعبير العادي str الأصلي (على سبيل المثال، يحتوي كل من الحقول الفرعية وحقول القائمة على هذا المعرف. بعد إزالة المكوك، اختفت
rootPidValue
الموجودة في الأطفال، ولا تزال البيانات الموجودة في القائمة موجودة، وفي هذا الوقت سيظل منطق المطابقة الأصلي يتجاهل المكوك عندما يكون هدف المهمة موجودًا بالفعل على الجانب الآخر)؛ لم يعد يفرض تغيير معرف العقدة الجذرية إلى 0
2.3.2 تحسين وضع دفتر العناوين
2.3.1 انقل إعدادات CSS للطبقة الخارجية لـ el-tree إلى الطبقة الداخلية للتخلص من تأثير إلغاء CSS المحدد في 2.3.0
2.3.0 إلغاء نطاق CSS
في الإصدار 2.2.9، تسري السمة البطيئة فقط على الجانب الأيسر من الشجرة، إذا كنت بحاجة إلى الجانب الأيمن، فاستخدم التحميل البطيء -> LazyRight.
2.2.8 تحسين استخدام defaultCheckedKeys وdefaultTransfer معًا، مما يؤدي إلى مشكلة إضافة الأحداث.عادةً ما يكون المكوك الأول الافتراضي هو أن الخلفية كسولة ولا تولد بياناتين من Data وtoData، ويجب تقسيمهما بواسطة الواجهة الأمامية في هذا الوقت، من الضروري تشغيل حدث الإضافة مرة أخرى؛ وبدلاً من ذلك، بدلاً من استخدام defaultTransfer، يمكنك استدعاء وظيفة addToAims(false) يدويًا بعد تغيير defaultCheckedKeys أثار.
2.2.6 أضف طريقة
clearChecked
لمسح العقد المحددة
2.2.5 أضف المعلمة
defaultExpandedKeys
لتوسيع العقد افتراضيًا
2.2.3 تقسيم
参数13 renderContent
هوrenderContentLeft,renderContentRight
يحددان على التوالي وظائف العقدة المخصصة على الجانبين الأيسر والأيمن، وأضف وظيفةfilterNode
لتخصيص البحث
2.2.2 إضافة معلمات التمييز المحددة
2.2.1 أضف حدث تحديد الكل في العنوان للحصول على وصف المعلمة التفصيلي، راجع
事件3,事件4
2.2.0 تمت إضافة وظيفة التحميل البطيء (وضع غير دفتر العناوين) للحصول على وصف تفصيلي للمعلمة، راجع
参数21, 参数22
2.1.2 تمت إضافة عناصر قابلة للتكوين لوضع دفتر العناوين، ولكن كوضع صيانة غير رئيسي، لا تزال المرونة منخفضة للحصول على وصف المعلمة التفصيلي، راجع
参数20
2.1.1 تم إصلاح خطأ المكوك عند تحديد العقدة الجذرية في وضع المصفوفة، وتجاهل المعلمة
leafOnly
، واحرص على عدم استخدام المعلمة arrayToTree إذا كانت بنية شجرة بالفعل.
2.1.0 تمت إضافة معلمة arrayTotree لتحويل مصفوفة أحادية البعد تلقائيًا إلى بنية الشجرة المطلوبة (راجع المعلمة 19، أو github-app.vue للحصول على التفاصيل)؛ وإصلاح مشكلة العقد المتبقية نصف المحددة بعد إزالة المكوك لبعضها غير الضرورية؛ المتغيرات
2.0.2 أضف منطقة محتوى مخصصة لفتحة رأس العنوان
2.0.1 تم إصلاح مشكلة انقطاع الاتصال بين الوالدين والطفل.
يضيف الإصدار 2.0.0 أحداث فحص البيانات على الجانبين الأيسر والأيمن لصندوق المكوك، وفتحات سفلية على الجانبين الأيسر والأيمن لصندوق المكوك.
يعمل الإصدار 1.9.8 على إصلاح الإبلاغ عن الأخطاء الخاصة بالزر المخصص
button_text
.
يضيف الإصدار 1.9.7 سمة
defaultTransfer
لتلبية احتياجات المستخدمين الذين لا يريدون تقسيم البيانات إلى fromData وtoData، ويضيف سمةplaceholder
.
1.9.0 تعزيز قوة المطابقة المنتظمة عندما يحتوي المعرف على أرقام وأحرف.
يعمل الإصدار 1.8.9 على إصلاح خطأ النسخ الناتج عن المكوك عندما تكون العقدة عبارة عن عقدة فرعية على جانب واحد وعقدة طرفية على الجانب الآخر! حل خطأ عامل التصفية غير الصالح عند تخصيص أسماء العقد.
يضيف الإصدار 1.8.8 معلمة
transferOpenNode
لإدارة ما إذا كان سيتم توسيع العقد بعد المكوك أم لا، ويتم استخدامdefaultCheckedKeys
لتعيين التوسيع الافتراضي الأولي للعقد.
يضيف الإصدار 1.8.7 وضع دفتر العناوين، والذي يمكن تكوينه من خلال حقل الوضع. القيمة الاختيارية لحقل الوضع هي
addressList
transfer
|.
يضبط الإصدار 1.7.7 معلمات أحداث
addBtn
وremoveBtn
، ويعيد ثلاث معلمات. المعلمة الأولى هي بيانات fromData المنقولة، والمعلمة الثانية هي بيانات toData المنقولة، والمعلمة الثالثة هي كائن {keys,nodes, harfKeys, harfNodes} . تمت إضافة معلمةrenderContent
لدعم تخصيص عقدة الشجرة.
يضيف الإصدار 1.6.7
filter,openAll
لتعيين ما إذا كان سيتم تمكين التصفية وما إذا كان سيتم توسيع الكل بشكل افتراضي.
يضيف الإصدار 1.5.9 المعلمة
leafOnly
لتعيين ما إذا كان سيتم إرجاع العقد الطرفية للشجرة فقط.
يستعيد الإصدار 1.5.8 التعليمات البرمجية الخاصة بإرجاع
nodes
التي تم حذفها لسبب غير مفهوم في الإصدار السابق. إذا كان مشروعك يحتاج فقط إلى قيم مفتاح العقدة المكوكية، فلا داعي للتحديث! الاعتذار. . .
يعمل الإصدار 1.5.7 على إصلاح مشكلة عدم تحديث البيانات غير المتزامنة للمكونات الفرعية في بعض الأحيان! تم إصلاح خطأ عند تخصيص اسم المعلمة العقدة_مفتاح، الأطفال، استبدال معرف الطبقة الأولى من البيانات تلقائيًا بـ 0
يضيف الإصدار 1.4.9 معلمات رد الاتصال لإضافة الأزرار وإزالتها. المعلمة الأولى للوظيفة (المفاتيح والعقد) هي قيمة مفتاح العقدة للعقدة المحددة، والمعلمة الثانية هي عقدة العقدة المحددة.
يعمل الإصدار 1.4.8 على إصلاح مشكلة عدم قدرة المعرف على اجتياز وظيفة التحقق المتكرر عندما يكون من النوع رقم، ولكن لا يزال يوصى باستخدام نوع السلسلة للمعرف.
يضيف الإصدار 1.4.7 معلمة
defaultProps
، ومعلمةnode_key
، ومعلمةpid
. وتتمثل الوظيفة الرئيسية في تخصيص بعض أسماء الحقول المهمة لتحسين مرونة البيانات وتجنب التضحية بها في الخلفية بسبب أسماء الحقول المختلفة.
يلغي الإصدار 1.3.7 الاعتماد على مكتبة التحميل في السابق، وكانت هذه المكتبة تستخدم فقط لبعض عمليات المعالجة العميقة للنسخ.
المعلمات: width
الوصف: نوع宽度
: String
المطلوبة: false
الافتراضي: 100%
الملحق:建议在外部盒子设定宽度和位置
المعلمات: height
الوصف: نوع高度
: String
المطلوبة: خطأ false
: 320px
المعلمات: title
الوصف: نوع标题
: Array
مطلوب: false
الافتراضي: ["源列表", "目标列表"]
المعلمات: button_text
الوصف: نوع按钮名字
: Array
مطلوب: false
الافتراضي:空
المعلمات: from_data
الوصف: نوع源数据
: Array
مطلوب: true
الملحق:数据格式同element-ui tree组件,但必须有id和pid
المعلمات: to_data
الوصف: نوع目标数据
: Array
مطلوب: true
الملحق:数据格式同element-ui tree组件,但必须有id和pid
المعلمات: defaultProps
الوصف:配置项-同el-tree中props
مطلوب: false
الملحق:用法和el-tree的props一样
المعلمات: وصف node_key
:自定义node-key的值,默认为id
: false
:必须与treedata数据内的id参数名一致,必须唯一
المعلمات: pid
الوصف:自定义pid的参数名,默认为"pid"
مطلوب: false
ملحق:有网友提出后台给的字段名不叫pid,因此增加自定义支持
--(عفا عليه الزمن) غير مستحسن! المعلمات: leafOnly
الوصف:是否只返回叶子节点
النوع: Boolean
مطلوب: false
الملحق:默认false,如果你只需要返回的末端子节点可使用此参数
المعلمات: وصف filter
:是否开启筛选功能
النوع: Boolean
مطلوب: false
المعلمات: openAll
الوصف:是否默认展开全部
: Boolean
مطلوبة: false
المعلمات: وصف renderContent
: نوع自定义树节点
: Function
المطلوبة: false
الملحق:用法同element-ui tree
المعلمات: وصف mode
:设置模式,字段可选值为transfer|addressList
: String
المطلوبة: false
الملحق: mode默认为transfer模式,即树形穿梭框模式,可配置字段为addressList改为通讯录模式,通讯录模式时按钮不可自定义名字,如要自定义标题名在title数组传入四个值即可,addressList模式时标题默认为通讯录、收件人、抄送人、密送人
المعلمات: وصف transferOpenNode
:穿梭后是否展开穿梭的节点
: Boolean
مطلوب: false
الملحق:默认为true即展开穿梭的节点,便于视觉查看,增加此参数是因为数据量大时展开会有明显卡顿问题,但注意,如此参数设置为false则穿梭后不展开,毕竟无法确定第几层就会有庞大数据
المعلمات: defaultCheckedKeys
الوصف: نوع默认展开节点
: Array
مطلوب: false
الملحق:只匹配初始时默认节点,不会在你操作后动态改变默认节点
المعلمات: placeholder
الوصف:设置搜索框提示语
: String
المطلوبة: false
الملحق:默认为请输入关键词进行筛选
المعلمات: وصف defaultTransfer
:是否自动穿梭一次默认选中defaultCheckedKeys的节点
: Boolean
مطلوبة: false
默认false,用来满足用户不想将数据拆分成fromData和toData的需求
المعلمات: arrayToTree
الوصف:是否开启一维数组转化为树形结构
النوع: Boolean
مطلوب: false
الملحق:数据必须存在根节点,并且不会断节,数据格式详见github上app.vue,根据id、pid对应关系转化,存在一定的性能问题
المعلمات: addressOptions
الوصف:通讯录模式配置项{num: Number, suffix: String, connector: String}
النوع: Object
المطلوب: false
الملحق: num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段(如id,即取此条数据的id拼接在后方)默认suffix connector -> 连接符(字符串)默认-
المعلمات: lazy
الوصف:是否启用懒加载
النوع: Boolean
مطلوب: false
الملحق:默认false,效果动el-tree懒加载,不可和openAll或默认展开同时使用
المعلمات: lazyFn
الوصف: نوع懒加载的回调函数
: Function
المطلوبة: true
الملحق:当适用lazy时必须传入回调函数,示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node,resolve->懒加载resolve,from -> left|right 表示回调来自左侧|右侧
الحدث: addBtn
الوصف:点击添加按钮时触发的事件
: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据,2.移动后右侧数据,3.移动的节点keys、nodes、halfKeys、halfNodes对象;通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
الحدث: removeBtn
الوصف:点击移除按钮时触发的事件
: function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据,2.移动后右侧数据,3.移动的节点keys、nodes、halfKeys、halfNodes对象;通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
الحدث: left-check-change
الوصف: معلمات رد الاتصال左侧源数据勾选事件
: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
الحدث: right-check-change
الوصف: معلمات رد الاتصال右侧目标数据勾选事件
: function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中
الفتحة: left-footer
، right-footer
الوصف:穿梭框左侧、右侧底部slot
الفتحة: title-left
، title-right
الوصف:穿梭框标题区左侧、右侧自定义内容