الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

وثيقة

مثال التوثيق

يعتمد هذا المكون على التطوير الثانوي لجدول العناصر ويستند إلى العمل الفعلي، فهو يقوم بتغليف الوظائف الشائعة الاستخدام وإنشاء الجداول من خلال التكوين وتنفيذ عناصر توسيع الرأس متعددة المستويات ووظائف الرأس المخصصة وما إلى ذلك.

يستخدم

يجب إدخال 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 >

الشكل العادي

خيارات الأعمدة وبيانات الجدول مطلوبة لتكوين الجدول. 

 < 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' ,
            } ,
          ] ,
        } ,

عرض محتوى العرض المخصص

تعيين خيارات العرض للعمود والوظيفة (الصف والعمود والفهرس $) 

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

تعيين عناصر التوسع

ما عليك سوى تعيين النوع: توسيع لعنصر تكوين العمود. يمكن للمحتوى الموسع استخدام الفتحة أو العرض. إذا تم تكوين الفتحة والعرض في نفس الوقت، فسيتم تجاهل الفتحة. 

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

فتحة مخصصة

ما عليك سوى تعيين solt:'' لعنصر تكوين العمود، والفتحة هي اسم الفتحة. 

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

رأس مخصص

ما عليك سوى تعيين renderHeader لعنصر تكوين العمود. renderHeader هو التكوين الأصلي لعنصر واجهة المستخدم (رسميًا، لا يُنصح باستخدام وظيفة عرض الرأس في العمود. يوصى باستخدام الفتحات!! ستكون هناك مطالبة على وحدة التحكم، وهو أمر محرج). لا يمكن تكرار اسم الفتحة. تم تعريف تكوين الفتحة في إعلان القالب

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,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 ;
    } ,

محتويات عمود الجدول هي مكونات

من خلال فتحة Solt، يمكنك أيضًا استخدام وظيفة التجسيد لعرض المكونات 

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

سمات الجدول

يتم تنفيذ كافة سمات الجدول من خلال v-bind="$attrs"، سمات الجدول الإضافية:

المعلمة يوضح يكتب القيمة الافتراضية
أعمدة أعمدة الجدول صفيف []
columnsKeyName مفتاح العمود إذا كنت بحاجة إلى استخدام حدث تغيير عامل التصفية، فأنت بحاجة إلى هذه السمة لتحديد العمود الذي تكون حالة عامل التصفية فيه (مفتاح العمود لسمات عمود الجدول) خيط -
محاذاة تنسيق خيط غادر
showPagination ما إذا كان سيتم عرض عناصر التحكم في الترحيل أم لا منطقية حقيقي
الصفحة الحالية الصفحة الحالية لعنصر تحكم الترحيل الحالي رقم 1
pageSizes pageSizes من عناصر التحكم في الترحيل صفيف [10، 20، 30، 50]
حجم الصفحة حجم الصفحة للتحكم في الترحيل صفيف []
تَخطِيط تخطيط التحكم في الترحيل خيط "الأحجام، السابق، جهاز النداء، التالي، الإجمالي"
المجموع إجمالي التحكم في الترحيل رقم 0
paginationStyle أسلوب التحكم في الترحيل هدف -
showOverflowTooltip قم بعرض تلميح الأداة عندما يكون المحتوى طويلًا جدًا ومخفيًا. إذا لم يتم تكوين العمود بشكل منفصل باستخدام showOverflowTooltip، فاستخدم هذه السمة. منطقية حقيقي
showTableSetting عرض إعدادات الجدول منطقية خطأ شنيع
إخفاء الأعمدة اسم العمود والتسمية المطلوب إخفاؤهما في بعض السيناريوهات، يجب عرض الأعمدة المخفية بناءً على بعض الشروط. صفيف []
customClass فئة نمط مخصص صفيف ["مجمّع جدول vue-jsx"]

أحداث الجدول

يتم تنفيذ جميع أحداث الجدول من خلال v-on="$listeners"، أحداث الجدول الإضافية:

المعلمة يوضح يكتب القيمة الافتراضية
تغيير الحجم سيتم تشغيل هذا الحدث من خلال التغييرات في تغيير الصفحة والتغيير الحالي، ويتم إضافته لتسهيل تغييرات الترحيل. وظيفة "وظيفة({pageSize: 10,currentPage: 1,}) {}"
تغيير الحجم يتم تشغيله عندما يتغير حجم الصفحة - -
التغيير الحالي يتم تشغيله عند تغيير الصفحة الحالية - -

تكوين أعمدة الأعمدة

المعلمة يوضح يكتب القيمة الافتراضية
دعم اسم الحقل المطابق لمحتوى العمود خيط -
فتحة اسم الفتحة للعمود (لاحظ أنه إذا كان الجدول متداخلاً، فلا يمكن تكرار اسم الفتحة، ونطاق الفتحة ({row, $index })) خيط -
ملصق العنوان المعروض خيط -
عرض عرض العمود المقابل رقم -
showOverflowTooltip إظهار تلميح الأداة عندما يكون المحتوى طويلًا جدًا ومخفيًا منطقية -
مُثَبَّت سواء كان العمود ثابتًا إلى اليسار أو اليمين (صحيح، يسار، يمين)، صحيح يعني ثابتًا إلى اليسار سلسلة منطقية -
يجعل وظيفة العرض jsx وظيفة تقديم (صف، عمود، فهرس $)
يكتب اختيار/فهرس/توسيع خيط -
renderHeader الوظيفة المستخدمة لرأس الجدول وعنوان العمود وعرض منطقة التسمية الوظيفة (العمود، النطاق })، العمود هو عنصر التكوين، والنطاق هو نطاق المكون الأصلي. (هذه السمة ليست معلمة أصلية) -
com.cellredstar ما إذا كان سيتم وضع علامة نجمة حمراء قبل نص الرأس أم لا منطقية خطأ شنيع
قابل للفرز ما إذا كان يمكن فرز العمود المقابل أم لا. إذا تم التعيين على "مخصص"، فهذا يعني أن المستخدم يريد الفرز عن بعد ويحتاج إلى الاستماع إلى حدث تغيير الترتيب في الجدول. منطقية، سلسلة (صواب، خطأ، "مخصص") خطأ شنيع
المنسق يستخدم لتنسيق المحتوى (السمة الأصلية لعنصر واجهة المستخدم) الوظيفة (الصف، العمود، قيمة الخلية، الفهرس) -
قابل للتحديد إنه صالح فقط للأعمدة ذات النوع = التحديد. النوع هو الوظيفة. يتم استخدام قيمة الإرجاع للوظيفة لتحديد ما إذا كان يمكن تحديد خانة الاختيار لهذا الصف. الوظيفة (الصف، الفهرس) -
showHeaderTooltip ما إذا كان سيتم عرض معلومات مطالبة النسخ عند تحريك الماوس إلى رأس الجدول منطقية -
headerTooltipText يعرض الرأس محتوى معلومات النسخ خيط -
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل