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

Compare commits

base: RogerWorkPC:4547332bc5b6f7bf003fbaee5aa882035367c6fb
Branches Tags
RogerWorkPC:main
...
compare: RogerWorkPC:d81643518846d029b0ceaac05c1369f8509a8129
Branches Tags
RogerWorkPC:main

3 Commits
4547332bc5 ... d816435188

Author SHA1 Message Date
roger_home_pc d816435188 学习 Table Demo
1 year ago
roger_home_pc cc18bbe554 Merge remote-tracking branch 'origin/main'
1 year ago
roger_home_pc 91a00e8089 学习 Table Demo
1 year ago
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
Unified View
Diff Options
Show Stats
  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> <template>
<div> <div>
<router-link :to="{name:'table1'}">Table Demo 1: 基本表格</router-link><br> <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:'table2'}">Table Demo 2: 斑马线表格</router-link><br>
<router-link :to="{name:'table3'}">Table Demo 3: 带边框的路由</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:'table4'}">Table Demo 4: 自定义样式</router-link><br>
<router-link :to="{name:'table5'}">Table Demo 5: 滚动条</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> <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:'table9'}">Table Demo 9: 带状态的行</router-link><br>
<router-link :to="{name:'table10'}">Table Demo 10: 单行选择</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:'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>
<div> <div>
<router-view></router-view> <router-view></router-view>
</div> </div></template>
</template>
<script setup> <script setup>
</script> </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 tableDemo9 = () => import('../views/Table_Demo9.vue')
const tableDemo10 = () => import('../views/Table_Demo10.vue') const tableDemo10 = () => import('../views/Table_Demo10.vue')
const tableDemo11 = () => import('../views/Table_Demo11.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', name: 'table11',
component: tableDemo11 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 // 创建路由器，使用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