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

el-table练习代码

Browse Source
main
RogerWork 1 year ago
parent 8019adc589
commit 55ea6412dc
7 changed files with 250 additions and 12 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. 6
      src/App.vue
  2. 25
      src/router/index.js
  3. 27
      src/views/Table_Demo1.vue
  4. 35
      src/views/Table_Demo2.vue
  5. 43
      src/views/Table_Demo3.vue
  6. 68
      src/views/Table_Demo4.vue
  7. 58
      src/views/Table_Demo5.vue

6
src/App.vue
Unescape View File

@ -1,6 +1,10 @@
<template>
<div>
<router-link :to="{name:'table1'}">Table Demo 1</router-link>
<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:'table4'}">Table Demo 4: 自定义样式</router-link><br>
<router-link :to="{name:'table5'}">Table Demo 5: 滚动条</router-link><br>
</div>
<div>
<router-view></router-view>

25
src/router/index.js
Unescape View File

@ -3,7 +3,10 @@ import {createRouter, createWebHistory} from 'vue-router'
// 引入视图
// const root = () => import('../App.vue')
const tableDemo1 = () => import('../views/Table_Demo1.vue')
const tableDemo2 = () => import('../views/Table_Demo2.vue')
const tableDemo3 = () => import('../views/Table_Demo3.vue')
const tableDemo4 = () => import('../views/Table_Demo4.vue')
const tableDemo5 = () => import('../views/Table_Demo5.vue')
// 引入组件
@ -20,6 +23,26 @@ const routes = [
name: 'table1',
component: tableDemo1
},
{
path: '/table2',
name: 'table2',
component: tableDemo2
},
{
path: '/table3',
name: 'table3',
component: tableDemo3
},
{
path: '/table4',
name: 'table4',
component: tableDemo4
},
{
path: '/table5',
name: 'table5',
component: tableDemo5
},
]
// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

27
src/views/Table_Demo1.vue
Unescape View File

@ -2,7 +2,7 @@
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address" ></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
@ -12,21 +12,28 @@ export default {
data() {
return {
tableData: [
{ date: "2016-05-03",
{
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles"},
{ date: "2016-05-04",
address: "No. 189, Grove St, Los Angeles"
},
{
date: "2016-05-04",
name: "Tom1",
address: "No. 1891, Grove St, Los Angeles"},
{ date: "2016-05-05",
address: "No. 1891, Grove St, Los Angeles"
},
{
date: "2016-05-05",
name: "Tom2",
address: "No. 1892, Grove St, Los Angeles"},
{ date: "2016-05-06",
address: "No. 1892, Grove St, Los Angeles"
},
{
date: "2016-05-06",
name: "Tom3",
address: "No. 1893, Grove St, Los Angeles"},
address: "No. 1893, Grove St, Los Angeles"
},
]
}
},
}
</script>

35
src/views/Table_Demo2.vue
Unescape View File

@ -0,0 +1,35 @@
<template>
<el-table :data="tableData" stripe>
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo2",
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>

43
src/views/Table_Demo3.vue
Unescape View File

@ -0,0 +1,43 @@
<template>
<el-table :data="tableData" border>
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "table_Demo3",
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>

68
src/views/Table_Demo4.vue
Unescape View File

@ -0,0 +1,68 @@
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180">
<template #default="scope">
<div class="name-wrapper">
<el-tag size="small">{{ scope.row.name }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column>
<template #header>
<el-input v-model="search" size="small" placeholder="Type to search"></el-input>
</template>
<template #default="{$index, row}">
<el-button size="small" @click="handleEdit($index, row)">Edit</el-button>
<el-button size="small" @click="handleDelete($index, row)" type="danger">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo4",
data() {
return {
search: "",
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"
},
]
}
},
methods: {
handleEdit: (index, row)=>{
console.log(index, row);
},
handleDelete: (index, row)=>{
console.log(index, row);
}
}
}
</script>
<style scoped>
</style>

58
src/views/Table_Demo5.vue
Unescape View File

@ -0,0 +1,58 @@
<template>
<el-table :data="tableData" height="200" scrollbar-always-on>
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo5",
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"
},
{
date: "2016-05-06",
name: "Tom4",
address: "No. 1893, Grove St, Los Angeles"
},
{
date: "2016-05-06",
name: "Tom5",
address: "No. 1893, Grove St, Los Angeles"
},
{
date: "2016-05-06",
name: "Tom6",
address: "No. 1893, Grove St, Los Angeles"
},
]
}
},
}
</script>
<style scoped>
</style>
Write Preview
Loading…
Cancel
Save