vue willtable

ส่วนประกอบตารางที่แก้ไขได้ของ Vue-Willtable

เอกสารภาษาอังกฤษ

ใช้กับส่วนประกอบของตารางที่แก้ไขได้ของ Vue ซึ่งรองรับการดำเนินการทางลัดหลายครั้งประสบการณ์การทำงานของ Excel Simulated

ตัวอย่างที่นี่: https://demo.willwuwei.com/willtable/

ระบบการแก้ไขแบบเรียลไทม์การแชร์ตามส่วนประกอบนี้:

เยี่ยมชม URL

ที่อยู่โครงการด้านหน้า

ย้อนกลับ -ที่อยู่โครงการ

ภาพหน้าจอ

ลักษณะ

• การปรับความกว้างของตาราง
• คอลัมน์ตารางคงที่
• การคัดกรองและเรียงลำดับข้อมูล
• หลายตัวเลือก
• ชุดลบและคัดลอกและวาง
• คุณสามารถคัดลอกและวางซึ่งกันและกันด้วย Excel
• Data Drop -down Copy
• เมื่อดึงการคัดลอกและเซลล์หลายตัวเลือกแบบฟอร์มสามารถรีดโดยอัตโนมัติ
• รับสายข้อมูลที่เปลี่ยนแปลง
• การตรวจสอบประเภทข้อมูลหลายประเภท
• สนับสนุนการตรวจสอบข้อมูลกฎที่กำหนดเอง
• รับสายข้อมูลที่ผิดกฎหมาย
• สนับสนุนการเพิกถอนและทำซ้ำ
• สามารถปรับแต่งแต่ละรูปแบบเซลล์และชื่อคลาส
• ใช้การแสดงผลในท้องถิ่นเพื่อรองรับการแสดงข้อมูลเพิ่มเติม

ติดตั้ง

 npm install vue-willtable --save

ติดตั้ง

แขวนอยู่ในโลก

 import Vue from 'vue'
import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

Vue . component ( 'VueWilltable' , VueWilltable )

ติดตั้งในส่วนประกอบ

 import VueWilltable from 'vue-willtable'

// require styles
import 'vue-willtable/dist/vue-willtable.min.css'

export default {
  components : {
    VueWilltable
  }
} 

ใช้ตัวอย่าง

< template >
  < willtable
    ref = " willtable "
    :columns = " columns "
    v-model = " data "
    maxHeight = " 800 " />
</ template >

< script >
export default {
  data () {
    return {
      columns : [
        {
          type : ' selection ' ,
          width : 40 ,
          fixed : true ,
        },
        {
          title : '序号' ,
          key : ' sid ' ,
          fixed : true ,
          type : ' number ' ,
          width : 100 ,
        },
        {
          title : '姓名' ,
          key : ' name ' ,
          fixed : true ,
          width : 120 ,
        },
        {
          title : '日期' ,
          key : ' date ' ,
          type : ' date ' ,
          width : 100 ,
        },
        {
          title : '工作岗位' ,
          key : ' email ' ,
          width : 300 ,
          type : ' select ' ,
          options : [
            {
              value : ' Web前端开发' ,
              label : ' Web前端开发' ,
            },
            {
              value : ' Java开发' ,
              label : ' Java开发' ,
            },
            {
              value : ' Python开发' ,
              label : ' Python开发' ,
            },
            {
              value : ' Php开发' ,
              label : ' Php开发' ,
            },
          ],
        },
        {
          title : '月份' ,
          key : ' month ' ,
          type : ' month ' ,
          width : 100 ,
        },
        {
          title : '地址' ,
          key : ' address ' ,
          width : 200 ,
        },
        {
          title : '标题' ,
          key : ' title ' ,
          width : 300 ,
        },
        {
          title : '内容' ,
          key : ' paragraph ' ,
          width : 300 ,
        },
        {
          title : '链接' ,
          key : ' url ' ,
          width : 200 ,
        },
        {
          title : ' ip ' ,
          key : ' ip ' ,
          width : 200 ,
          validate : ( value ) => {
            const pattern = / ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )( . ((2(5 [ 0-5 ] | [ 0-4 ] d )) | [ 0-1 ] ? d {1,2} )) {3} / g ;
            return pattern . test (value);
          },
        },
        {
          title : '总金额' ,
          key : ' sum ' ,
          width : 200 ,
        },
        {
          title : ' ID ' ,
          key : ' id ' ,
          width : 200 ,
        },
        {
          title : '色值' ,
          key : ' color ' ,
          width : 200 ,
        },
      ],
      data : [],
    },
  },
  mounted () {
    this . getData ();
  },
  methods : {
    getData () {
      const data = [];
      this . $refs . willtable . setData (data);
    },
  },
};
</ script >

ข้อมูล

สิ่งนี้

สิ่งนี้

v-model进行值的绑定

คุณสมบัติ

พารามิเตอร์	อธิบาย	พิมพ์	ค่าเสริม	ค่าเริ่มต้น
คอลัมน์	คำอธิบายการกำหนดค่าของคอลัมน์ตาราง	อาร์เรย์	จุดตัด	-
MaxHeight	ตารางสูงสุด	สตริง / หมายเลข	จุดตัด	จุดตัด
Rowheight	ความสูงต่อบรรทัด	สตริง / หมายเลข	จุดตัด	จุดตัด
พิการ	ห้ามบรรณาธิการ	บูลีน	จุดตัด	จริง
การฉาย	ไอคอนประเภทส่วนหัวแสดง	บูลีน	จุดตัด	เท็จ
ห้องขัง	วิธีการโทรกลับสไตล์สไตล์เซลล์	ฟังก์ชัน ({row, colorn, rowindex, columnindex})	จุดตัด	จุดตัด
cellclassname	วิธีการโทรกลับของ classname ของเซลล์	ฟังก์ชัน ({row, colorn, rowindex, columnindex})	จุดตัด	จุดตัด
disabledCell	ปิดการใช้งานเซลล์	ฟังก์ชัน ({row, คอลัมน์, rowindex, columnindex}) => boolean	จุดตัด	() => เท็จ
showaddrow	แสดงฟังก์ชั่นเพิ่มเติม	บูลีน	จุดตัด	เท็จ
addrowandcopy	คัดลอกบรรทัดก่อนหน้าของข้อมูลเมื่อเพิ่มแถว	บูลีน	จุดตัด	เท็จ

เหตุการณ์

ชื่อเหตุการณ์	อธิบาย	พารามิเตอร์การโทรกลับ
การเปลี่ยนแปลงการเลือก	เหตุการณ์จะถูกทริกเกอร์เมื่อรายการการเลือกเปลี่ยนไป	การเลือก

วิธี

ชื่อวิธี	อธิบาย	พารามิเตอร์
getData	ใช้เพื่อรับข้อมูลและส่งคืนข้อมูลตารางปัจจุบัน	จุดตัด
setdata	ใช้ในการตั้งค่าข้อมูลและรีเซ็ตบันทึกประวัติศาสตร์	ข้อมูล
getChangedata	รับการเปลี่ยนแปลงข้อมูล	จุดตัด
GeterRorrows	รับข้อมูลและดัชนีของข้อผิดพลาด	จุดตัด
ส่วนเสริม	เพิ่มบรรทัดของข้อมูลที่ด้านล่าง	รายการ
เพิ่ม	เพิ่ม	Rowindex, Copyrow, CustomData
ลบออก	การลบแบบแบทช	คีย์ค่า
setcelldata	ตั้งค่าข้อมูลเซลล์	Rowindex, Colornindex, ค่า
เต็มหน้าจอ	จอแสดงผลแบบเต็มหน้าจอ	จุดตัด
หน้าจอ	ออกจากหน้าจอเต็มรูปแบบ	จุดตัด

แอตทริบิวต์คอลัมน์

พารามิเตอร์	อธิบาย	พิมพ์	ค่าเสริม	ค่าเริ่มต้น
สำคัญ	ชื่อฟิลด์ของเนื้อหาคอลัมน์ที่เกี่ยวข้อง	สาย	จุดตัด	จุดตัด
ชื่อ	ข้อความการแสดงผลหัวบรรทัด	สาย	จุดตัด	จุดตัด
ความกว้าง	ความกว้างคอลัมน์	สตริง / หมายเลข	จุดตัด	จุดตัด
พิมพ์	ประเภทคอลัมน์	สาย	การเลือก/หมายเลข/วันที่/เลือก/เดือน	จุดตัด
รูปแบบ	รูปแบบพันคะแนน (สำหรับประเภทหมายเลข)	บูลีน	จุดตัด	จริง
ตัวเลือก	เลือกตัวเลือกดร็อป -ดาวน์	อาร์เรย์	{value: 'value', label: 'แสดงข้อความ'}	จุดตัด
ที่ตายตัว	ไม่ว่าจะได้รับการแก้ไขทางด้านซ้าย	บูลีน	จุดตัด	เท็จ
การกระทำ	ไม่ว่าจะเปิดใช้งานการคัดกรองและการเรียงลำดับ	บูลีน	จุดตัด	เท็จ
พิการ	ไม่ว่าจะห้ามบรรณาธิการ	บูลีน	จุดตัด	เท็จ
เป็นคำสั่ง	ไม่ว่าจะปิดการตรวจสอบ	บูลีน	จุดตัด	เท็จ
ตรวจสอบความถูกต้อง	การตรวจสอบที่กำหนดเอง	ฟังก์ชั่น (ค่า)	จุดตัด	จุดตัด
แบบกำหนดเอง	อินพุตที่กำหนดเอง	ฟังก์ชัน ({row, คอลัมน์, rowindex, columnindex, value})	จุดตัด	จุดตัด

คีย์ทางลัด

คีย์ทางลัด	อธิบาย
คีย์ทิศทาง	กล่องแก้ไขมือถือ
Ctrl + C	แปะ
ctrl + v	สำเนา
Ctrl + A	การเลือกตั้งเต็มเซลล์
ctrl + z	ถอน
ctrl + y	re -do
เข้า	การแก้ไขเซลล์/การแก้ไขเซลล์ที่สมบูรณ์
ลบ backspace	ลบ

ผู้เขียน

Willwu