vue free table

วิวฟรีโต๊ะ

จากการห่อหุ้มรองของตารางองค์ประกอบ UI นั้น รองรับฟังก์ชันเกือบทั้งหมดของตารางต้นฉบับ

การใช้เอกสาร

ดูตัวอย่างการสาธิต

ลักษณะเฉพาะ

• การห่อหุ้มรองตามตาราง 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 )
      }
    }
  }
]

การกำหนดค่า columns-props คอลัมน์-props ใช้เพื่อกำหนดค่าแอตทริบิวต์อุปกรณ์ประกอบฉากเริ่มต้นของแต่ละคอลัมน์ของคอลัมน์

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

การแบ่งหน้า การกำหนดค่าการแบ่งหน้า ใช้เพื่อควบคุมการแสดงส่วนประกอบของการแบ่งหน้า ส่วนประกอบของการแบ่งหน้าเป็นการห่อหุ้มรองที่สืบทอด el-pagination โดยมาจากส่วนประกอบของการแบ่งหน้าในไลบรารีส่วนประกอบ 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

นอกจากนี้ยังสนับสนุนคุณลักษณะทั้งหมดที่ได้รับการสนับสนุนโดย el-pagination ขององค์ประกอบอื่น ๆ ดูเอกสารประกอบสำหรับรายละเอียด

ตัวอย่าง

 < 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