vue jsx table

เอกสาร

ตัวอย่างเอกสาร

ส่วนประกอบนี้อิงตามการพัฒนารองของตารางองค์ประกอบและอิงตามธุรกิจจริง โดยสรุปฟังก์ชันที่ใช้กันทั่วไป สร้างตารางผ่านการกำหนดค่า และใช้ รายการขยาย ส่วนหัวแบบหลายระดับ ฟังก์ชันส่วน หัวแบบกำหนดเอง ฯลฯ

ใช้

จำเป็นต้องแนะนำ Element-ui ในโครงการก่อนใช้งาน

 npm i vue - jsx - table

import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'

Vue . use ( vueJsxTable )

วิธีการซีดี

  <!-- 引入样式 -->
    < link
      rel = "stylesheet"
      href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
    />
    < ! -- 引入组件库 -- >
    < script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > 

แบบธรรมดา

จำเป็นต้องมีตัวเลือกคอลัมน์และ tableData สำหรับการกำหนดค่าตาราง

 < vue-jsx-table
        : columns = "columns"
        : tableData = "tableData"
        border
        @ selection - change = "selectionChange"
        : total = "100"
      >
 < / vue-jsx-table >
  data() {
    return {
      columns : [
        {
          type : 'selection' ,
          fixed : 'left' ,
          selectable : this . rowSelectableHandle ,
        } ,
        {
          label : '年龄' ,
          prop : 'age' ,
          width : 300 ,
          sortable : true ,
        } ,
    
        {
          label : '学校' ,
          prop : 'school' ,
          width : 200 ,
        } ,
        {
          label : '学费' ,
          prop : 'fee' ,
          width : 200 ,
        } ,

        {
          label : '编辑' ,
          prop : 'edit' ,
          slot : 'edit' ,
          fixed : 'right' ,
          width : 200 ,
        } ,
      ] ,
      tableData : [ ]
    } ;
  } ,

ส่วนหัวหลายระดับ

การตั้งค่าลูกเป็นคอลัมน์สามารถแสดงส่วนหัวของกลุ่มได้

   {
          label : '多级表头' ,
          children : [
            {
              label : '年级' ,
              prop : 'grade' ,
              width : 120 ,
            } ,
            {
              label : '班级' ,
              prop : 'class' ,
            } ,
          ] ,
        } , 

การแสดงผลเนื้อหาการเรนเดอร์แบบกำหนดเอง

ตั้งค่าตัวเลือกการเรนเดอร์สำหรับคอลัมน์, ฟังก์ชัน(แถว, คอลัมน์, $index)

     {
          label : 'render' ,
          prop : 'render' ,
          width : 200 ,
          render : ( row , column , $index ) => {
            return (
              < div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
                测试render
              </ div >
            ) ;
          } ,
        } , 

ตั้งค่ารายการขยาย

คุณจะต้องตั้งค่า type:expand สำหรับรายการการกำหนดค่าคอลัมน์ เนื้อหาที่ขยายสามารถใช้ช่องหรือการแสดงผลได้ หากมีการกำหนดค่าช่องและการแสดงผลพร้อมกัน ช่องจะถูกละเว้น

 {
          type : 'expand' ,
          slot : 'expand' ,
        } , 

สล็อตแบบกำหนดเอง

คุณจะต้องตั้งค่า solt:'' สำหรับรายการการกำหนดค่าคอลัมน์ และ slot คือชื่อของช่อง

  {
          label : '编辑' ,
          prop : 'edit' ,
          slot : 'edit' ,
          fixed : 'right' ,
          width : 200 ,
        } , 

ส่วนหัวที่กำหนดเอง

คุณจะต้องตั้งค่า renderHeader สำหรับรายการการกำหนดค่าคอลัมน์เท่านั้น renderHeader เป็นการกำหนดค่าดั้งเดิมของ element-ui (อย่างเป็นทางการไม่แนะนำให้ใช้ฟังก์ชัน render-header ในคอลัมน์ แนะนำให้ใช้ slots!! จะมีข้อความแจ้งบนคอนโซลน่าอาย) คุณยังสามารถใช้ slots ได้โดยกำหนด ค่า รายการ slotHeader ไม่สามารถระบุชื่อสล็อตซ้ำได้ กำหนดการกำหนดค่าสล็อตไว้ในการประกาศเทมเพลต

renderHeader

   {
          label : '自定义表头' ,
          prop : 'name' ,
          width : 120 ,
          sortable : true ,
          renderHeader : ( column , scope ) => {
            console . log ( 'scope' , scope ) ;
            return < span class = "cell-header-red-star" > { column . label } </ span > ;
          } ,
        } ,

slotHeader

       {
          label : '姓名' ,
          prop : 'name' ,
          slotHeader : 'slotHeader' ,
        } ,

         <!-- 插槽表头 -->
        < template v-slot : slotHeader = "{ column }" >
          <!-- {{ scope.column.label }} -->
          < span >插槽表头： { { column . label } } </ span >
        </ template > 

การเปลี่ยนแปลงขนาดเพจของการควบคุมเพจและการเปลี่ยนแปลงใน currentPage จะทำให้เกิดการเปลี่ยนแปลงเพจ ฟังก์ชัน ({currentPage, pageSize})

  < vue-jsx-table
        @ page-change = "pageChangeHandle"
        : currentPage . sync = "paginationParams.pageNo"
        : total = "100"
      >
  </ vue-jsx-table >    
pageChangeHandle ( val ) {
      this . paginationParams . pageNo = val . currentPage ;
      this . paginationParams . pageSize = val . pageSize ;
    } , 

เนื้อหาคอลัมน์ตารางเป็นส่วนประกอบ

ผ่านสล็อตโซลิด คุณยังสามารถใช้ฟังก์ชันการเรนเดอร์เพื่อเรนเดอร์ส่วนประกอบต่างๆ ได้

  < template v-slot : edit = "{ row }" >
          < el-input v-model = "row.name" > </ el-input >
        </ template >

คุณสมบัติตาราง

คุณลักษณะของตารางทั้งหมดถูกนำมาใช้ผ่าน v-bind="$attrs" คุณลักษณะของตารางเพิ่มเติม:

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าเริ่มต้น
คอลัมน์	คอลัมน์ตาราง	อาร์เรย์	-
คอลัมน์KeyName	คีย์ของคอลัมน์ หากคุณต้องการใช้เหตุการณ์การเปลี่ยนแปลงตัวกรอง คุณต้องมีแอตทริบิวต์นี้เพื่อระบุว่าคอลัมน์ใดเป็นเงื่อนไขตัวกรอง (คีย์คอลัมน์ของแอตทริบิวต์ตาราง-คอลัมน์)	เชือก	-
จัดตำแหน่ง	การจัดตำแหน่ง	สตริง	ซ้าย
แสดงการแบ่งหน้า	จะแสดงการควบคุมเพจหรือไม่	บูลีน	จริง
หน้าปัจจุบัน	เพจปัจจุบันของการควบคุมเพจปัจจุบัน	ตัวเลข	1
ขนาดหน้า	ขนาดหน้าของการควบคุมเพจ	อาร์เรย์	[10, 20, 30, 50]
ขนาดหน้า	ขนาดเพจของการควบคุมเพจ	อาร์เรย์	-
เค้าโครง	เค้าโครงของการควบคุมเพจ	สตริง	'ขนาด ก่อนหน้า เพจเจอร์ ถัดไป รวม'
ทั้งหมด	รวมการควบคุมเพจ	ตัวเลข	0
สไตล์การแบ่งหน้า	ลักษณะของการควบคุมเพจ	วัตถุ	-
showOverflowTooltip	แสดงคำแนะนำเครื่องมือเมื่อเนื้อหายาวเกินไปและถูกซ่อนไว้ หากไม่ได้กำหนดค่าคอลัมน์แยกต่างหากด้วย showOverflowTooltip ให้ใช้แอตทริบิวต์นี้ ค่าเริ่มต้นจะเป็นจริง	บูลีน	จริง
แสดงการตั้งค่าตาราง	แสดงการตั้งค่าตาราง	บูลีน	เท็จ
ซ่อนคอลัมน์	ชื่อคอลัมน์และป้ายกำกับที่ต้องซ่อน ในบางสถานการณ์ จำเป็นต้องแสดงคอลัมน์ที่ซ่อนตามเงื่อนไขบางประการ	อาร์เรย์	-
คลาสแบบกำหนดเอง	คลาสสไตล์ที่กำหนดเอง	อาร์เรย์	['vue-jsx-table-wrapper']

เหตุการณ์ตาราง

กิจกรรมตารางทั้งหมดถูกนำมาใช้ผ่าน v-on="$listeners" กิจกรรมตารางเพิ่มเติม:

พารามิเตอร์	แสดงให้เห็น	พิมพ์	ค่าเริ่มต้น
การเปลี่ยนแปลงขนาด	เหตุการณ์นี้จะถูกกระตุ้นโดยการเปลี่ยนแปลงในการเปลี่ยนแปลงหน้าและการเปลี่ยนแปลงปัจจุบัน มันถูกเพิ่มเข้ามาเพื่ออำนวยความสะดวกในการเปลี่ยนแปลงเพจ	การทำงาน	'ฟังก์ชั่น ({pageSize: 10, currentPage: 1,}) {}'
การเปลี่ยนแปลงขนาด	เริ่มทำงานเมื่อขนาดหน้าเปลี่ยนแปลง	-	-
ปัจจุบันการเปลี่ยนแปลง	เริ่มทำงานเมื่อหน้าปัจจุบันมีการเปลี่ยนแปลง	-	-

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

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