github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

table docs update

pull/87/head
baiyaaaaa 2016-09-19 17:55:44 +08:00
parent 46464cba06
commit 004df33b53
1 changed files with 148 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
examples/docs/table.md
View File

@ -4,21 +4,33 @@
data() { data() {
return { return {
tableData: [{ tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02', date: '2016-05-02',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-04', date: '2016-05-04',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-01', date: '2016-05-01',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄' province: '上海',
}, { city: '普陀区',
date: '2016-05-03', address: '上海市普陀区金沙江路 1518 弄',
name: '王小虎', zip: 200333
address: '上海市普陀区金沙江路 1516 弄'
}], }],
tableData2: [{ tableData2: [{
date: '2016-05-02', date: '2016-05-02',
@ -42,31 +54,52 @@
tableData3: [{ tableData3: [{
date: '2016-05-03', date: '2016-05-03',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-02', date: '2016-05-02',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-04', date: '2016-05-04',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-01', date: '2016-05-01',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-08', date: '2016-05-08',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-06', date: '2016-05-06',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-07', date: '2016-05-07',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}], }],
singleSelection: {}, singleSelection: {},
multipleSelection: [] multipleSelection: []
@ -112,16 +145,16 @@
<template> <template>
<el-table <el-table
:data="tableData" :data="tableData"
style="width: 520px"> style="width: 100%">
<el-table-column <el-table-column
property="date" property="date"
label="日期" label="日期"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"
@ -168,16 +201,16 @@
<el-table <el-table
:data="tableData" :data="tableData"
stripe stripe
style="width: 520px"> style="width: 100%">
<el-table-column <el-table-column
property="date" property="date"
label="日期" label="日期"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"
@ -222,16 +255,16 @@
<el-table <el-table
:data="tableData" :data="tableData"
border border
style="width: 520px"> style="width: 100%">
<el-table-column <el-table-column
property="date" property="date"
label="日期" label="日期"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"
@ -277,18 +310,18 @@
<template> <template>
<el-table <el-table
:data="tableData2" :data="tableData2"
style="width: 520px" style="width: 100%"
:custom-criteria="['$info', '$positive']" :custom-criteria="['$info', '$positive']"
:custom-background-colors="['#C9E5F5', '#E2F0E4']"> :custom-background-colors="['#C9E5F5', '#E2F0E4']">
<el-table-column <el-table-column
property="date" property="date"
label="日期" label="日期"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"
@ -338,16 +371,16 @@
:data="tableData3" :data="tableData3"
height="250" height="250"
border border
style="width: 520px"> style="width: 100%">
<el-table-column <el-table-column
property="date" property="date"
label="日期" label="日期"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"
@ -407,7 +440,7 @@
:data="tableData" :data="tableData"
:fixed-column-count="1" :fixed-column-count="1"
border border
style="width: 500px"> style="width: 100%">
<el-table-column <el-table-column
property="date" property="date"
label="日期" label="日期"
@ -416,13 +449,28 @@
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="300"> width="120">
</el-table-column>
<el-table-column
property="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
property="city"
label="市区"
width="120">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"
label="地址" label="地址"
width="300"> width="300">
</el-table-column> </el-table-column>
<el-table-column
property="zip"
label="邮编"
width="120">
</el-table-column>
</el-table> </el-table>
</template> </template>
@ -431,21 +479,33 @@
data() { data() {
return { return {
tableData: [{ tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02', date: '2016-05-02',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-04', date: '2016-05-04',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-01', date: '2016-05-01',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄' province: '上海',
}, { city: '普陀区',
date: '2016-05-03', address: '上海市普陀区金沙江路 1518 弄',
name: '王小虎', zip: 200333
address: '上海市普陀区金沙江路 1516 弄'
}] }]
} }
} }
@ -465,7 +525,7 @@
:data="tableData3" :data="tableData3"
:fixed-column-count="1" :fixed-column-count="1"
border border
style="width: 500px" style="width: 100%"
height="250"> height="250">
<el-table-column <el-table-column
property="date" property="date"
@ -475,13 +535,28 @@
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="300"> width="120">
</el-table-column>
<el-table-column
property="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
property="city"
label="市区"
width="120">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"
label="地址" label="地址"
width="300"> width="300">
</el-table-column> </el-table-column>
<el-table-column
property="zip"
label="邮编"
width="120">
</el-table-column>
</el-table> </el-table>
</template> </template>
@ -492,31 +567,52 @@
tableData3: [{ tableData3: [{
date: '2016-05-03', date: '2016-05-03',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-02', date: '2016-05-02',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-04', date: '2016-05-04',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-01', date: '2016-05-01',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-08', date: '2016-05-08',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-06', date: '2016-05-06',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, { }, {
date: '2016-05-07', date: '2016-05-07',
name: '王小虎', name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}] }]
} }
} }
@ -536,7 +632,7 @@
:data="tableData" :data="tableData"
selection-mode="single" selection-mode="single"
@selectionchange="handleSelectionChange" @selectionchange="handleSelectionChange"
style="width: 520px" style="width: 100%"
allow-no-selection> allow-no-selection>
<el-table-column <el-table-column
type="index" type="index"
@ -604,7 +700,7 @@
<el-table <el-table
:data="tableData3" :data="tableData3"
selection-mode="multiple" selection-mode="multiple"
style="width: 420px" style="width: 100%"
@selectionchange="handleMultipleSelectionChange"> @selectionchange="handleMultipleSelectionChange">
<el-table-column <el-table-column
type="selection" type="selection"
@ -686,17 +782,17 @@
<el-table <el-table
:data="tableData" :data="tableData"
border border
style="width: 520px"> style="width: 100%">
<el-table-column <el-table-column
property="date" property="date"
label="日期" label="日期"
sortable sortable
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="name" property="name"
label="姓名" label="姓名"
width="120"> width="180">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
property="address" property="address"