vue free table

جدول خالي من الرؤية

استنادًا إلى التغليف الثانوي لعنصر جدول واجهة المستخدم، فإنه يدعم جميع وظائف الجدول الأصلي تقريبًا

استخدام الوثيقة

معاينة تجريبية

مميزة

• التغليف الثانوي يعتمد على جدول element-ui لتقليل كمية التعليمات البرمجية
• وراثة المعلمات والأحداث الخاصة بمكون جدول element-ui
• دعم تقديم تقديم
• دعم فتحة الفتحة
• مقدمة مكون الدعم
• دعم بيانات الشجرة
• دعم وظيفة الترحيل

وثيقة

ملكية	يوضح	يكتب	تقصير
data	سمة data الجدول	Array	[]
column	يستخدم للتحكم في عرض أعمدة الجدول	Array	[]
columns-props	يستخدم لتحديد الخصائص المشتركة لجميع column	Object
pagination	ما إذا كان سيتم عرض مكون الترحيل، يرجى مراجعة عمود pagination配置للحصول على التفاصيل.	Boolean	false

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

يتم استخدام عمود تكوين العمود للتحكم في سلوك عمود الجدول.

 const column = [
  { label : '日期' , prop : 'date' , width : 100 } ,
  { label : '姓名' , prop : 'name' } ,
  { label : '邮编' , prop : 'zip' } ,
  {
    label : '地址' ,
    prop : 'address' ,
    render : ( h , scope ) => {
      return ( < el-tag > { scope . row . address } < el-tag > )
    }
  } ,
  {
    label : '组件' ,
    prop : 'cmp' ,
    component : EditBtn ,
    listeners : {
      'row-edit' ( row ) {
        console . log ( 'row-edit' , row )
      }
    }
  }
]

يتم استخدام الدعائم الخاصة بتكوين الأعمدة - الدعائم لتكوين سمات الدعائم الافتراضية لكل عمود من الأعمدة.

 const columnsProps = {
  align : 'left' ,
  minWidth : 120
}

يتم استخدام ترقيم الصفحات لتكوين ترقيم الصفحات للتحكم في عرض مكونات ترحيل الصفحات، وهو عبارة عن تغليف ثانوي يرث ترقيم الصفحات، ويأتي من مكون ترحيل الصفحات في مكتبة مكونات vue-element-admin في المشروع مفتوح المصدر.

المعلمة	يوضح	يكتب	القيمة الافتراضية
total	إجمالي عدد الإدخالات	Number	/
page	يدعم رقم الصفحة الحالية معدّل .sync	Number	1
limit	عرض عدد الإدخالات في كل صفحة، مع دعم معدّل .sync	Number	20
page-sizes	عرض إعدادات خيار محدد الأرقام لكل صفحة	Number[]	[10، 20، 30، 50]
hidden	سواء للاختباء	Boolean	false
auto-scroll	ما إذا كان سيتم التمرير تلقائيًا إلى الأعلى بعد ترقيم الصفحات	Boolean	true

كما أنه يدعم جميع السمات التي يدعمها ترقيم الصفحات للعناصر الأخرى. انظر الوثائق للحصول على التفاصيل

مثال

 < template >
  < free-table border stripe : data = "data" : column = "column" > </ free-table >
</ template >

< script >
import FreeTable from '@/components/FreeTable'

export default {
  components : {
    FreeTable
  } ,
  data ( ) {
    return {
      column : [
        { label : '日期' , prop : 'date' } ,
        { label : '姓名' , prop : 'name' } ,
        { label : '省份' , prop : 'province' } ,
        { label : '市区' , prop : 'city' } ,
        { label : '地址' , prop : 'address' }
      ] ,
      data : [
        {
          date : '2016-05-03' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        } ,
        {
          date : '2016-05-02' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
< / script>

بناء الأمر

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint