element ui tree table

عنصر واجهة المستخدم شجرة الجدول

قم بتوسيع مكون جدول ElementUI لدعم بنية الشجرة

ثَبَّتَ

npm install element-ui-tree-table -S

الاستخدام

يعتمد المشروع على Element-UI، عليك تقديمه أولاً

يقدم

 import TreeTableComponent from 'element-ui-tree-table'
import 'element-ui-tree-table/dist/index.css'
Vue . use ( TreeTableComponent , {
    prefix : 'i' // 可选
} )

يستخدم

بيانات الاختبار

< template >
  < div id = " app " >
    < i-tree-table height = " 600px " id-key = " rowKey " :columns = " columns "
      @select = " onSelect "
      @trigger = " onTrigger "
      :data = " data " border >
      < el-table-column label = "负责人" prop = " leader " />
      < el-table-column label = "创建时间" prop = " createTime " />
      < el-table-column label = "经验要求" prop = " expr " >
        < template slot-scope="scope">
          < span v-if = " scope.row.expr " >{{scope.row.expr}}</ span >
          < span v-else >————</ span >
        </ template >
      </ el-table-column >
      < el-table-column label = "发布天数" prop = " date " />
    </ i-tree-table >
    < br />
    < el-button type = " primary " size = " small " @click = " add " >增加一行</ el-button >
  </ div >
</ template >

< script >
import data from ' ./components/data '
import TreeTable from ' ./components/tree-table '
export default {
  name : ' App ' ,
  components : {
    TreeTable
  },
  data () {
    return {
      data,
      columns : [{
        type : ' index ' ,
        align : ' center '
      }, {
        type : ' selection ' ,
        align : ' center '
      }, {
        label : '职位名称' ,
        prop : ' name '
      }],
      id : 1000
    }
  },
  methods : {
    add () {
      this . data . push ({
        rowKey : this . id ++ ,
        name : '新增行' ,
        leader : '管理员' ,
        $expanded : true ,
        createTime : ' 2019-07-24 ' ,
        expr : ' ' ,
        date : ' 1天'
      })
    },
    onSelect ( selection ) {
      console . log (selection)
    },
    onTrigger ( row , expanded ) {
      /**
       * 在这里可以保留折叠状态
       * 也可以设置reserve-expaned属性为true保留状态 但是你不能够设置默认值，设置了默认值的行将不受控，因为* 组件肯定是选择用户传入$expaned属性为准
       * 所以推荐的做法是监听trigger事件
       */
      row . $expanded = expanded
    }
  }
}
</ script >

عناصر التكوين

ملكية	يكتب	يوضح	القيمة الافتراضية
بيانات	صفيف	يتطلب مصدر البيانات تحديد سمةrowKey افتراضيًا لتعريف الصف بشكل فريد	-
مفتاح الهوية	خيط	فهرس مصدر البيانات الفريد	RowKey
أعمدة	صفيف	تكوين أعمدة الفهرس وتحديد الأعمدة وتوسيع الأعمدة	-
رمز	خيط	توسيع أيقونة	رمز-علامة الإقحام-يمين
فئة الزناد	خيط	قم بتوسيع فئة الزر	-
توسيع الاحتياطي	منطقية	ما إذا كان سيتم الاحتفاظ بالحالة الموسعة يوصى بعدم تعيين التوسيع الافتراضي عندما تكون هذه الخاصية صحيحة. يمكن تحقيق الاحتفاظ بالحالة الموسعة من خلال الاستماع إلى المشغلات.	-
عناصر تكوين الجدول الأصلي	-	ارجع إلى وثائق عنصر واجهة المستخدم	-

عنصر تكوين الأعمدة

يلاحظ:

• سيتم التعامل مع العنصر الأول الذي لا يكون نوعه فهرسًا واختياره كزر توسيع لوضع العمود.
• يمكن أن يكون هناك عمود موسع واحد فقط، وسيتم تجاهل أي أعمدة إضافية.

قم بتوسيع تكوين العمود

ملكية	يكتب	يوضح	قيمة اختيارية
ملصق	خيط	العنوان المعروض	-
دعم	خيط	اسم الحقل المطابق لمحتوى العمود، يمكنك أيضًا استخدام سمة الخاصية	-
محاذاة	خيط	تنسيق	يسار/وسط/يمين
عرض	خيط	عرض العمود المقابل	-
مُثَبَّت	سلسلة، منطقية	سواء كان العمود ثابتًا إلى اليسار أو اليمين، يعني صحيح ثابتًا إلى اليسار
تقديم رأس	الوظيفة (ح، { العمود، $index })	الوظيفة المستخدمة لعرض منطقة تسمية عنوان العمود
اسم الفصل	خيط	اسم فئة العمود
تسمية فئة الاسم	خيط	اسم فئة مخصصة لرأس العمود الحالي
إظهار تجاوز السعة تلميح الأداة	منطقية	إظهار تلميح الأداة عندما يكون المحتوى طويلًا جدًا ومخفيًا
الحد الأدنى للعرض	خيط	الحد الأدنى لعرض العمود المقابل، والفرق عن العرض هو أن العرض ثابت، وسيقوم min-width بتخصيص العرض المتبقي بشكل متناسب للعمود الذي تم تعيين min-width له.
محاذاة الرأس	خيط	إذا لم يتم تعيين هذا العنصر، فسيتم استخدام محاذاة الجدول.	يسار/وسط/يمين
يمكن تغيير حجمه	منطقية	ما إذا كان يمكن تغيير عرض العمود المقابل عن طريق السحب (يجب ضبط سمة الحدود على true)

تكوين العمود العادي

ملكية	يكتب	يوضح	قيمة اختيارية
يكتب	خيط	نوع العمود المقابل، إذا تم تعيين التحديد، فسيتم عرض مربع التحديد المتعدد؛ إذا تم تعيين الفهرس، فسيتم عرض فهرس الصف.	اختيار/فهرس
ملصق	خيط	العنوان المعروض	-
دعم	خيط	اسم الحقل المطابق لمحتوى العمود، يمكنك أيضًا استخدام سمة الخاصية	-
محاذاة	خيط	تنسيق	يسار/وسط/يمين
عرض	خيط	عرض العمود المقابل	-
مُثَبَّت	سلسلة، منطقية	سواء كان العمود ثابتًا إلى اليسار أو اليمين، يعني صحيح ثابتًا إلى اليسار
تقديم رأس	الوظيفة (ح، { العمود، $index })	الوظيفة المستخدمة لعرض منطقة تسمية عنوان العمود
اسم الفصل	خيط	اسم فئة العمود
تسمية فئة الاسم	خيط	اسم فئة مخصصة لرأس العمود الحالي
قابل للتحديد	الوظيفة (الصف، الفهرس)	إنه صالح فقط للأعمدة ذات النوع = التحديد. النوع هو الوظيفة. يتم استخدام قيمة الإرجاع للوظيفة لتحديد ما إذا كان يمكن تحديد خانة الاختيار لهذا الصف.
إظهار تجاوز السعة تلميح الأداة	منطقية	إظهار تلميح الأداة عندما يكون المحتوى طويلًا جدًا ومخفيًا
الحد الأدنى للعرض	خيط	الحد الأدنى لعرض العمود المقابل، والفرق عن العرض هو أن العرض ثابت، وسيقوم min-width بتخصيص العرض المتبقي بشكل متناسب للعمود الذي تم تعيين min-width له.
محاذاة الرأس	خيط	إذا لم يتم تعيين هذا العنصر، فسيتم استخدام محاذاة الجدول.	يسار/وسط/يمين
يمكن تغيير حجمه	منطقية	ما إذا كان يمكن تغيير عرض العمود المقابل عن طريق السحب (يجب ضبط سمة الحدود على true)

حدث

اسم الحدث	تأثير	المعلمة
مشغل	يتم تشغيله عندما تتغير الحالة الموسعة، ويستخدم بشكل عام لحفظ الحالة	(عقدة مصدر بيانات البيانات، الحالة الموسعة)

طريقة

اسم الطريقة	تأثير	المعلمة
توسيع الكل	قم بتوسيع الكل	-
انهيار الكل	إخفاء الكل	-

ارجع إلى وثائق عنصر واجهة المستخدم