RogerWorkPC
/
vue3_element_demo1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

学习 Table Demo

Browse Source
main
roger_home_pc 1 year ago
parent cc18bbe554
commit d816435188
6 changed files with 456 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/App.vue
  2. 24
      src/router/index.js
  3. 44
      src/views/Table_Demo12.vue
  4. 62
      src/views/Table_Demo13.vue
  5. 257
      src/views/Table_Demo14.vue
  6. 62
      src/views/Table_Demo15.vue

11
src/App.vue
Unescape View File

@ -1,8 +1,8 @@
<template>
<div>
<router-link :to="{name:'table1'}">Table Demo 1: 基本表格</router-link><br>
<router-link :to="{name:'table2'}">Table Demo 2: 斑马线路由</router-link><br>
<router-link :to="{name:'table3'}">Table Demo 3: 带边框的路由</router-link><br>
<router-link :to="{name:'table2'}">Table Demo 2: 斑马线表格</router-link><br>
<router-link :to="{name:'table3'}">Table Demo 3: 带边框的表格</router-link><br>
<router-link :to="{name:'table4'}">Table Demo 4: 自定义样式</router-link><br>
<router-link :to="{name:'table5'}">Table Demo 5: 滚动条</router-link><br>
<router-link :to="{name:'table6'}">Table Demo 6: 固定列</router-link><br>
@ -11,11 +11,14 @@
<router-link :to="{name:'table9'}">Table Demo 9: 带状态的行</router-link><br>
<router-link :to="{name:'table10'}">Table Demo 10: 单行选择</router-link><br>
<router-link :to="{name:'table11'}">Table Demo 11: 多行选择</router-link><br>
<router-link :to="{name:'table12'}">Table Demo 12: 排序</router-link><br>
<router-link :to="{name:'table13'}">Table Demo 13: 筛选</router-link><br>
<router-link :to="{name:'table14'}">Table Demo 14: 展开行</router-link><br>
<router-link :to="{name:'table15'}">Table Demo 15: 树形数据</router-link><br>
</div>
<div>
<router-view></router-view>
</div>
</template>
</div></template>
<script setup>
</script>

24
src/router/index.js
Unescape View File

@ -13,6 +13,10 @@ const tableDemo8 = () => import('../views/Table_Demo8.vue')
const tableDemo9 = () => import('../views/Table_Demo9.vue')
const tableDemo10 = () => import('../views/Table_Demo10.vue')
const tableDemo11 = () => import('../views/Table_Demo11.vue')
const tableDemo12 = () => import('../views/Table_Demo12.vue')
const tableDemo13 = () => import('../views/Table_Demo13.vue')
const tableDemo14 = () => import('../views/Table_Demo14.vue')
const tableDemo15 = () => import('../views/Table_Demo15.vue')
// 引入组件
@ -79,6 +83,26 @@ const routes = [
name: 'table11',
component: tableDemo11
},
{
path: '/table12',
name: 'table12',
component: tableDemo12
},
{
path: '/table13',
name: 'table13',
component: tableDemo13
},
{
path: '/table14',
name: 'table14',
component: tableDemo14
},
{
path: '/table25',
name: 'table15',
component: tableDemo15
},
]
// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

44
src/views/Table_Demo12.vue
Unescape View File

@ -0,0 +1,44 @@
<template>
<el-table :data="tableData" :default-sort="{prop:'date',order: 'descending'}" >
<el-table-column prop="date" label="Date" sortable></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo12",
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles"
},
{
date: "2016-05-04",
name: "Tom1",
address: "No. 1891, Grove St, Los Angeles"
},
{
date: "2016-05-05",
name: "Tom2",
address: "No. 1892, Grove St, Los Angeles"
},
{
date: "2016-05-06",
name: "Tom3",
address: "No. 1893, Grove St, Los Angeles"
},
]
}
},
}
</script>
<style scoped>
</style>

62
src/views/Table_Demo13.vue
Unescape View File

@ -0,0 +1,62 @@
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="Date"></el-table-column>
<el-table-column prop="name" label="Name" :filters="filters" :filter-method="filter_methods"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo13",
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles"
},
{
date: "2016-05-04",
name: "Tom1",
address: "No. 1891, Grove St, Los Angeles"
},
{
date: "2016-05-05",
name: "Tom2",
address: "No. 1892, Grove St, Los Angeles"
},
{
date: "2016-05-06",
name: "Tom3",
address: "No. 1893, Grove St, Los Angeles"
},
],
filters: [
{text: "Tom", value: "Tom"},
{text: "Tom1", value: "Tom1"},
{text: "Tom2", value: "Tom2"},
{text: "Tom3", value: "Tom3"}
]
}
},
methods: {
filter_methods(value, row, column) {
console.log('filter')
console.log(row)
console.log(column)
const property = column['property']
console.log(property)
console.log(value)
console.log(row[property])
return row[property] === value
}
}
}
</script>
<style scoped>
</style>

257
src/views/Table_Demo14.vue
Unescape View File

@ -0,0 +1,257 @@
<template>
<el-table :data="tableData">
<el-table-column type="expand">
<template #default="props">
<div>
<p>State: {{ props.row.state}}</p>
<p>City: {{ props.row.city}}</p>
<p>Address: {{ props.row.address}}</p>
<p>Zip: {{ props.row.zip}}</p>
<h3>Family</h3>
<el-table :data="props.row.family">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="state" label="State"></el-table-column>
<el-table-column prop="city" label="City"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
<el-table-column prop="zip" label="Zip"></el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column prop="date" label="Date"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "TableDemo14",
data() {
return {
tableData: [
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-08',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-06',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
{
date: '2016-05-07',
name: 'Tom',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
family: [
{
name: 'Jerry',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Spike',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
{
name: 'Tyke',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
},
],
},
]
}
}
}
</script>
<style scoped>
</style>

62
src/views/Table_Demo15.vue
Unescape View File

@ -0,0 +1,62 @@
<template>
<el-table :data="tableData" row-key="id" default-expand-all>
<el-table-column prop="date" label="Date"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo15",
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-02',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 2,
date: '2016-05-04',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 3,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
children: [
{
id: 31,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
{
id: 32,
date: '2016-05-01',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
],
},
{
id: 4,
date: '2016-05-03',
name: 'wangxiaohu',
address: 'No. 189, Grove St, Los Angeles',
},
]
}
}
}
</script>
<style scoped>
</style>
Write Preview
Loading…
Cancel
Save