element tree grid

شبكة شجرة العنصر

تقوم شبكة الشجرة بتوسيع element واجهة المستخدم باستخدام vue

الإصدارات v1.0.4

• حاول توسيع الصف الموسع بعد إعادة تحميل البيانات

تواجه مشاكل مع <el-table-column type="selection" fixed></el-table-column>

إذا كان لديك أي فكرة، مرحبا بكم!

العروض التوضيحية

يبدأ

• استنساخ لمشروعك

  git clone https://github.com/foolishchow/element-tree-grid.git
  cd element-tree-grid
  npm install # or yarn
  npm run dev

• استخدم مع العقدة

  • ثَبَّتَ

  npm install element-tree-grid --save

  • في مشروعك

   //common 
  var ElTreeGrid = require ( 'element-tree-grid' ) ;
  Vue . component ( ElTreeGrid . name , ElTreeGrid ) ;

الاستخدام

• الاستخدام الشائع

   < el-table :data =" model.menus " border max-height =" 250 " >
      < el-table-tree-column 
          file-icon =" icon icon-file " 
          folder-icon =" icon icon-folder " 
          prop =" label " label =" labelname " width =" 220 " > </ el-table-tree-column >
      < el-table-column prop =" description " label =" description "   width =" 180 " > </ el-table-column >
  </ el-table >

• الحصول على الأطفال من بعيد

  • أتش تي أم أل

   < div id =" app " style =" padding: 30px; " >
      < el-table :data =" model.menus " border max-height =" 400 " >
          < el-table-tree-column 
              :remote =" remote "
              file-icon =" icon icon-file " 
              folder-icon =" icon icon-folder " 
              prop =" label " label =" MenuName " width =" 320 " > </ el-table-tree-column >
          < el-table-column prop =" id " label =" id " width =" 180 " > </ el-table-column >
          < el-table-column prop =" description " label =" Description " :show-overflow-tooltip =" true " width =" 180 " > </ el-table-column >
      </ el-table >
  </ div >

  • جافا سكريبت

   new Vue ( {
      el : "#app" ,
      data : {
          model : {
              menus : trees
          }
      } ,
      methods : {
          remote ( row , callback ) {
              // async or sync are both supported
              setTimeout ( function ( ) {
                  callback ( row . children )
              } , 500 )
          }
      }
  } )

• صفات

  يتم دعم كافة الدعائم الخاصة el-table-column ؛

  اسم	وصف	قيم
  دعم	نفس el-table-column
  ملصق	نفس el-table-column
  عرض	نفس el-table-column
  مُثَبَّت	نفس el-table-column
  يمكن تغيير حجمه	نفس el-table-column
  المنسق	نفس el-table-column
  اسم الفئة	نفس el-table-column
  TreeKey	مفتاح التحليل المتداخل	النوع: String ، الافتراضي: 'id'
  ChildNumKey	مفتاح رقم الطفل	النوع: String ، الافتراضي: 'child_num'
  ParentKey	مفتاحparent_id	النوع: String ، الافتراضي: 'parent_id'
  مستوىمفتاح	مفتاح عمق العقدة	النوع: String ، الافتراضي: 'depth'
  ChildKey	تم وضع مفتاح أبناء العقدة	النوع: String ، الافتراضي: 'children'
  fileIcon	اسم فئة رمز الملف	النوع: String ، الافتراضي: 'el-icon-file'
  FolderIcon	اسم فئة رمز المجلد، عند الاستخدام المفتوح: folderIcon-open	النوع: String ، الافتراضي: 'el-icon-folder'
  بعيد	طريقة عن بعد لإنجاب الأطفال	النوع: Function ، الافتراضي: null
  allRemote	طلب جميع البيانات من جهاز التحكم عن بعد، يجب عليك تكوين جهاز التحكم remote أولاً، واستخدام ذاكرة التخزين المؤقت للطلب بشكل افتراضي	النوع: Boolean ، الافتراضي: false
  توسيع الكل	قم بتوسيع كافة العقد عند تحميلها	النوع: Boolean ، الافتراضي: false
  قم بتوسيع مفتاح	يخبرنا المفتاح ما إذا كان الخط مفتوحًا عند البدء (تم إنفاقه مرة واحدة فقط)	النوع: String ، الافتراضي: expanded
  indentSize	رقم المسافة البادئة، متحد px	النوع: Number ، الافتراضي: 14

أمثلة

• شائع

 < el-table-tree-column 
            file-icon =" icon icon-file " 
            folder-icon =" icon icon-folder " 
            prop =" label " 
            label =" labelname " 
            width =" 220 " > </ el-table-tree-column >

• مع المنسق

 < el-table-tree-column 
            file-icon =" icon icon-file " 
            folder-icon =" icon icon-folder " 
            prop =" label " 
            label =" labelname " 
            :formatter =" formatter "
            width =" 220 " > </ el-table-tree-column >

• مع نطاق Solts

 < el-table-tree-column 
            file-icon =" icon icon-file " 
            folder-icon =" icon icon-folder " 
            prop =" label " 
            label =" labelname " 
            width =" 220 " >
    < template slot-scope =" scope " >
        < span > prefix = > </ span >
        < span > {{scope.row.label}} -- {{scope.row.id}} </ span > 
        < span > < = suffix </ span >   
    </ template >
</ el-table-tree-column >