element ui tree table

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

ขยายองค์ประกอบตาราง 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 โดยค่าเริ่มต้นเพื่อระบุแถวโดยไม่ซ้ำกัน	-
รหัสประจำตัว	สตริง	ดัชนีเฉพาะของแหล่งข้อมูล	แถวคีย์
คอลัมน์	อาร์เรย์	กำหนดค่าคอลัมน์ดัชนี เลือกคอลัมน์ และขยายคอลัมน์	-
ไอคอน	สตริง	ขยายไอคอน	el-ไอคอนคาเร็ต-ขวา
ทริกเกอร์คลาส	สตริง	ขยายคลาสปุ่ม	-
สำรองขยาย	บูลีน	ไม่ว่าจะคงสถานะขยายไว้หรือไม่ ขอแนะนำไม่ให้ตั้งค่าการขยายเริ่มต้นเมื่อคุณสมบัตินี้เป็นจริง	-
รายการการกำหนดค่าตารางดั้งเดิม	-	อ้างถึงเอกสารประกอบ element-ui	-

รายการการกำหนดค่าคอลัมน์

สังเกต:

• องค์ประกอบแรกที่มีประเภทไม่ใช่ดัชนีและส่วนที่เลือกจะถือเป็นปุ่มขยายเพื่อวางคอลัมน์
• สามารถขยายได้เพียงคอลัมน์เดียวเท่านั้น และคอลัมน์เพิ่มเติมใดๆ จะถูกละเว้น

ขยายการกำหนดค่าคอลัมน์

คุณสมบัติ	พิมพ์	แสดงให้เห็น	ค่าที่ไม่บังคับ
ฉลาก	สตริง	ชื่อที่แสดง	-
ข้อเสนอ	สตริง	ชื่อฟิลด์ที่สอดคล้องกับเนื้อหาคอลัมน์คุณยังสามารถใช้แอตทริบิวต์คุณสมบัติ	-
จัดตำแหน่ง	สตริง	การจัดตำแหน่ง	ซ้าย/กลาง/ขวา
ความกว้าง	สตริง	ความกว้างของคอลัมน์ที่สอดคล้องกัน	-
ที่ตายตัว	สตริง, บูลีน	ไม่ว่าคอลัมน์จะถูกตรึงไว้ทางซ้ายหรือขวา ค่าจริงหมายถึงการตรึงไว้ทางซ้าย
แสดงผลส่วนหัว	ฟังก์ชั่น(h, { คอลัมน์, $index })	ฟังก์ชันที่ใช้สำหรับชื่อคอลัมน์ การแสดงผลพื้นที่ป้ายกำกับ
ชื่อชั้นเรียน	สตริง	คลาสคอลัมน์ชื่อ
ชื่อคลาสป้ายกำกับ	สตริง	ชื่อคลาสที่กำหนดเองสำหรับส่วนหัวของคอลัมน์ปัจจุบัน
แสดงคำแนะนำเครื่องมือล้น	บูลีน	แสดงคำแนะนำเครื่องมือเมื่อเนื้อหายาวเกินไปและถูกซ่อนอยู่
ความกว้างขั้นต่ำ	สตริง	ความกว้างขั้นต่ำของคอลัมน์ที่สอดคล้องกัน ความแตกต่างจากความกว้างคือความกว้างได้รับการแก้ไข และความกว้างขั้นต่ำจะจัดสรรความกว้างที่เหลือตามสัดส่วนให้กับคอลัมน์ที่ตั้งค่าความกว้างขั้นต่ำไว้
การจัดตำแหน่งส่วนหัว	สตริง	การจัดตำแหน่งส่วนหัว หากไม่ได้ตั้งค่ารายการนี้ การจัดตำแหน่งของตารางจะถูกนำมาใช้	ซ้าย/กลาง/ขวา
ปรับขนาดได้	บูลีน	ความกว้างของคอลัมน์ที่เกี่ยวข้องสามารถเปลี่ยนแปลงได้ด้วยการลากหรือไม่ (ต้องตั้งค่าแอตทริบิวต์เส้นขอบให้เป็นจริง)

การกำหนดค่าคอลัมน์ปกติ

คุณสมบัติ	พิมพ์	แสดงให้เห็น	ค่าที่ไม่บังคับ
พิมพ์	สตริง	ประเภทคอลัมน์ที่สอดคล้องกัน หากตั้งค่าการเลือก กล่องเลือกหลายรายการจะปรากฏขึ้น หากตั้งค่าดัชนี ดัชนีของแถวจะปรากฏขึ้น	การเลือก/ดัชนี
ฉลาก	สตริง	ชื่อที่แสดง	-
ข้อเสนอ	สตริง	ชื่อฟิลด์ที่สอดคล้องกับเนื้อหาคอลัมน์คุณยังสามารถใช้แอตทริบิวต์คุณสมบัติ	-
จัดตำแหน่ง	สตริง	การจัดตำแหน่ง	ซ้าย/กลาง/ขวา
ความกว้าง	สตริง	ความกว้างของคอลัมน์ที่สอดคล้องกัน	-
ที่ตายตัว	สตริง, บูลีน	ไม่ว่าคอลัมน์จะถูกตรึงไว้ทางซ้ายหรือขวา ค่าจริงหมายถึงการตรึงไว้ทางซ้าย
แสดงผลส่วนหัว	ฟังก์ชั่น(h, { คอลัมน์, $index })	ฟังก์ชันที่ใช้สำหรับชื่อคอลัมน์ การแสดงผลพื้นที่ป้ายกำกับ
ชื่อชั้นเรียน	สตริง	คลาสคอลัมน์ชื่อ
ชื่อคลาสป้ายกำกับ	สตริง	ชื่อคลาสที่กำหนดเองสำหรับส่วนหัวของคอลัมน์ปัจจุบัน
เลือกได้	ฟังก์ชั่น (แถว, ดัชนี)	ใช้ได้เฉพาะกับคอลัมน์ที่มี type=selection เท่านั้น ค่าที่ส่งคืนของ Function จะใช้ในการพิจารณาว่าช่องทำเครื่องหมายของแถวนี้สามารถตรวจสอบได้หรือไม่
แสดงคำแนะนำเครื่องมือล้น	บูลีน	แสดงคำแนะนำเครื่องมือเมื่อเนื้อหายาวเกินไปและถูกซ่อนอยู่
ความกว้างขั้นต่ำ	สตริง	ความกว้างขั้นต่ำของคอลัมน์ที่สอดคล้องกัน ความแตกต่างจากความกว้างคือความกว้างได้รับการแก้ไข และความกว้างขั้นต่ำจะจัดสรรความกว้างที่เหลือตามสัดส่วนให้กับคอลัมน์ที่ตั้งค่าความกว้างขั้นต่ำไว้
การจัดตำแหน่งส่วนหัว	สตริง	การจัดตำแหน่งส่วนหัว หากไม่ได้ตั้งค่ารายการนี้ การจัดตำแหน่งของตารางจะถูกนำมาใช้	ซ้าย/กลาง/ขวา
ปรับขนาดได้	บูลีน	ความกว้างของคอลัมน์ที่เกี่ยวข้องสามารถเปลี่ยนแปลงได้ด้วยการลากหรือไม่ (ต้องตั้งค่าแอตทริบิวต์เส้นขอบให้เป็นจริง)

เหตุการณ์

ชื่อเหตุการณ์	ผล	พารามิเตอร์
สิ่งกระตุ้น	ทริกเกอร์เมื่อสถานะขยายเปลี่ยนแปลง โดยทั่วไปใช้เพื่อบันทึกสถานะ	(โหนดแหล่งข้อมูล สถานะขยาย)

วิธี

ชื่อวิธีการ	ผล	พารามิเตอร์
ขยายทั้งหมด	ขยายทั้งหมด	-
ยุบทั้งหมด	ซ่อนทั้งหมด	-

อ้างถึงเอกสารประกอบ element-ui