vue willtable

vue-willtable مكون الجدول القابل للتحرير

وثيقة باللغة الإنجليزية

مكون جدول قابل للتحرير مناسب لـ Vue، ويدعم عمليات مفاتيح الاختصار المتعددة، ويحاكي تجربة تشغيل Excel

العرض التوضيحي هنا: https://demo.willwuwei.com/willtable/

تم تنفيذ نظام المشاركة وتحرير النماذج في الوقت الفعلي لعدة أشخاص بناءً على هذا المكون:

زيارة URL

عنوان المشروع الأمامي

عنوان مشروع الواجهة الخلفية

لقطة شاشة

مميزة

• تعديل عرض الطاولة
• أعمدة الجدول ثابتة
• تصفية البيانات وفرزها
• سطر التحديد المتعدد
• حذف دفعة ونسخ ولصق
• النسخ واللصق باستخدام برنامج Excel
• نسخة منسدلة للبيانات
• يمكن تمرير الجدول تلقائيًا عند سحبه للأسفل لنسخ الخلايا أو تحديدها متعددًا.
• الحصول على صفوف البيانات المتغيرة
• التحقق من أنواع البيانات المتعددة
• دعم التحقق من بيانات القاعدة المخصصة
• الحصول على صفوف البيانات مع التحقق غير القانوني
• دعم التراجع والإعادة
• يمكن تخصيص كل نمط خلية واسم فئة
• استخدم العرض المحلي لدعم عرض كميات أكبر من البيانات

ثَبَّتَ

 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 >

بيانات

يستدعي this.$refs.willtable التابع setData لتحديث بيانات الجدول بالكامل وإعادة تعيين سجلات البيانات التاريخية.

يستدعي this.$refs.willtable طريقة getData للحصول على بيانات الجدول بالكامل.

v-model يربط القيم

ملكية

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
أعمدة	وصف تكوين أعمدة الجدول	صفيف	——	[]
أقصى ارتفاع	الحد الأقصى لارتفاع الجدول	سلسلة/رقم	——	——
RowHeight	ارتفاع كل صف	سلسلة/رقم	——	——
عاجز	التحرير محظور	منطقية	——	حقيقي
showIcon	إظهار رمز نوع الرأس	منطقية	——	خطأ شنيع
cellStyle	طريقة رد الاتصال لنمط الخلية	الدالة ({صف، عمود، صف، فهرس عمود})	——	——
cellClassName	طريقة رد الاتصال الخاصة بـ className للخلية	الدالة ({صف، عمود، صف، فهرس عمود})	——	——
DisableCell	تعطيل الخلايا	الدالة({صف، عمود، رووإندكس، كولوميندكس}) => منطقية	——	() => خطأ
showAddRow	إظهار وظيفة إضافة صف	منطقية	——	خطأ شنيع
addRowAndCopy	انسخ صف البيانات السابق عند إضافة صف	منطقية	——	خطأ شنيع

حدث

اسم الحدث	يوضح	معلمات رد الاتصال
تغيير الاختيار	يتم تشغيل هذا الحدث عندما يتغير التحديد	اختيار

طريقة

اسم الطريقة	يوضح	المعلمة
getData	يستخدم للحصول على البيانات وإرجاع بيانات الجدول الحالي	——
setData	يستخدم لتعيين البيانات وإعادة ضبط التاريخ	بيانات
getChangeData	الحصول على صفوف البيانات المتغيرة	——
getErrorRows	الحصول على البيانات والفهرس مع أخطاء التحقق	——
addItem	أضف صفًا من البيانات في الأسفل	غرض
addRow	أضف صفًا	RowIndex، CopyRow، CustomData
RemoveItems	بالنسبة لحذف الدُفعات، فإن مفتاح المعلمة هو سمة التعريف الفريدة لكل صف مثل المعرف، والقيم عبارة عن مجموعة من سمات التعريف.	المفتاح، القيمة
setCellData	تعيين بيانات الخلية	قيمة الصف، قيمة العمود، قيمة
ملء الشاشة	عرض كامل الشاشة	——
com.exitFullscreen	الخروج من وضع ملء الشاشة	——

خصائص العمود

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
مفتاح	اسم الحقل المطابق لمحتوى العمود	خيط	——	——
عنوان	نص عرض رأس العمود	خيط	——	——
عرض	عرض العمود	سلسلة/رقم	——	——
يكتب	نوع العمود	خيط	اختيار/رقم/تاريخ/اختيار/شهر	——
شكل	تنسيق علامة الألف (لنوع الرقم)	منطقية	——	حقيقي
خيارات	حدد خيار القائمة المنسدلة	صفيف	{القيمة: "القيمة"، التسمية: "عرض النص" }	——
مُثَبَّت	هل هو ثابت على الجانب الأيسر؟	منطقية	——	خطأ شنيع
فعل	ما إذا كان سيتم تمكين التصفية والفرز	منطقية	——	خطأ شنيع
عاجز	ما إذا كان سيتم حظر التحرير	منطقية	——	خطأ شنيع
noVerify	ما إذا كان سيتم تعطيل التحقق	منطقية	——	خطأ شنيع
التحقق من صحة	التحقق المخصص	الوظيفة (القيمة)	——	——
customInput	المدخلات المخصصة	الدالة ({صف، عمود، فهرس الصف، فهرس العمود، القيمة })	——	——

مفتاح الاختصار

مفتاح الاختصار	يوضح
مفاتيح الأسهم	نقل مربع التحرير
السيطرة + ج	لصق
السيطرة+V	ينسخ
السيطرة + أ	حدد كافة الخلايا
السيطرة + Z	يلغي
السيطرة + ص	إعادة
يدخل	تحرير الخلية/تحرير الخلية بالكامل
حذف، مسافة للخلف	يمسح

مؤلف

ويلوو