element tree grid

องค์ประกอบต้นไม้ตาราง

ตารางต้นไม้ขยาย UI 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 >

• รับเด็กจากระยะไกล

  • html

   < 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
  ทรีคีย์	กุญแจสำคัญสำหรับการแยกวิเคราะห์แบบ neasted	ประเภท: String , ค่าเริ่มต้น: 'id'
  เด็กNumKey	กุญแจของเด็กNum	ประเภท: String , ค่าเริ่มต้น: 'child_num'
  parentKey	คีย์ของ parent_id	ประเภท: String , ค่าเริ่มต้น: 'parent_id'
  ระดับคีย์	กุญแจสำคัญของความลึกของโหนด	ประเภท: String , ค่าเริ่มต้น: 'depth'
  เด็กคีย์	วางคีย์ของลูกของโหนดแล้ว	ประเภท: String , ค่าเริ่มต้น: 'children'
  ไฟล์ไอคอน	ไอคอนไฟล์ชื่อคลาส	ประเภท: String , ค่าเริ่มต้น: 'el-icon-file'
  โฟลเดอร์ไอคอน	ไอคอนโฟลเดอร์ className เมื่อ opend ให้ใช้: folderIcon-open	ประเภท: String , ค่าเริ่มต้น: 'el-icon-folder'
  ระยะไกล	วิธีระยะไกลในการรับลูก	ประเภท: Function , ค่าเริ่มต้น: null
  ทั้งหมดระยะไกล	ขอข้อมูลทั้งหมดจากระยะไกล คุณต้องกำหนดค่า prop remote ก่อน ใช้แคชคำขอเริ่มต้น	ประเภท: Boolean , ค่าเริ่มต้น: false
  ขยายทั้งหมด	ขยายโหนดทั้งหมดเมื่อโหลด	ประเภท: Boolean , ค่าเริ่มต้น: false
  ขยายคีย์	ปุ่มบอกว่าบรรทัดถูกเปิดเมื่อเริ่มต้นหรือไม่ (ใช้ไปเพียงครั้งเดียว)	ประเภท: String , ค่าเริ่มต้น: expanded
  เยื้องขนาด	หมายเลขเยื้อง รวมกันเป็น 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 >