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 55ea6412dc
commit 8d97214424
6 changed files with 303 additions and 0 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. 4
      src/App.vue
  2. 24
      src/router/index.js
  3. 43
      src/views/Table_Demo6.vue
  4. 66
      src/views/Table_Demo7.vue
  5. 87
      src/views/Table_Demo8.vue
  6. 79
      src/views/Table_Demo9.vue

4
src/App.vue
Unescape View File

@ -5,6 +5,10 @@
<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>
<router-link :to="{name:'table7'}">Table Demo 7: 多级表头</router-link><br>
<router-link :to="{name:'table8'}">Table Demo 8: 合并行列</router-link><br>
<router-link :to="{name:'table9'}">Table Demo 9: 带状态的行</router-link><br>
</div>
<div>
<router-view></router-view>

24
src/router/index.js
Unescape View File

@ -7,6 +7,10 @@ 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')
const tableDemo6 = () => import('../views/Table_Demo6.vue')
const tableDemo7 = () => import('../views/Table_Demo7.vue')
const tableDemo8 = () => import('../views/Table_Demo8.vue')
const tableDemo9 = () => import('../views/Table_Demo9.vue')
// 引入组件
@ -43,6 +47,26 @@ const routes = [
name: 'table5',
component: tableDemo5
},
{
path: '/table6',
name: 'table6',
component: tableDemo6
},
{
path: '/table7',
name: 'table7',
component: tableDemo7
},
{
path: '/table8',
name: 'table8',
component: tableDemo8
},
{
path: '/table9',
name: 'table9',
component: tableDemo9
},
]
// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

43
src/views/Table_Demo6.vue
Unescape View File

@ -0,0 +1,43 @@
<template>
<el-table :data="tableData" style="width: 80%;">
<el-table-column prop="date" label="Date" fixed width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="2500"></el-table-column>
<el-table-column prop="address" label="Address" fixed="right" width="300"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo6",
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>

66
src/views/Table_Demo7.vue
Unescape View File

@ -0,0 +1,66 @@
<template>
<el-table :data="tableData" >
<el-table-column prop="date" label="Date" width="150"></el-table-column>
<el-table-column label="Delivery info">
<el-table-column prop="name" label="Name" width="150"></el-table-column>
<el-table-column label="Address info">
<el-table-column prop="state" label="State" width="150"></el-table-column>
<el-table-column prop="city" label="City" width="150"></el-table-column>
<el-table-column prop="address" label="Address" width="300"></el-table-column>
<el-table-column prop="zip" label="Zip" width="150"></el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo7",
data() {
return {
tableData: [
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
]
}
}
}
</script>
<style scoped>
</style>

87
src/views/Table_Demo8.vue
Unescape View File

@ -0,0 +1,87 @@
<template>
<el-table :data="tableData" :span-method="arraySpanMethod" border>
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="amount1" sortable label="Amount1"></el-table-column>
<el-table-column prop="amount2" sortable label="Amount2"></el-table-column>
<el-table-column prop="amount3" sortable label="Amount3"></el-table-column>
</el-table>
<br>
<el-table :data="tableData" :span-method="objectSpanMethod" border>
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="amount1" sortable label="Amount1"></el-table-column>
<el-table-column prop="amount2" sortable label="Amount2"></el-table-column>
<el-table-column prop="amount3" sortable label="Amount3"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo8",
data() {
return {
tableData: [
{
id: '12987122',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10,
},
{
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12,
},
{
id: '12987124',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9,
},
{
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17,
},
{
id: '12987126',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15,
},
]
}
},
methods: {
arraySpanMethod({row, column, rowIndex, columnIndex}) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2] // columnIndex === 0 表示第一列，[1, 2] 1代表行不合并，2代表列占用2列
} else if (columnIndex === 1) {
return [0, 0] // 由于第一列占用了两列，所以第二列的内容需要设置为[0,0]就不会占空间了
}
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return [2, 1]
} else if (rowIndex % 2 === 1) {
return [0, 0]
}
}
}
}
}
</script>
<style scoped>
</style>

79
src/views/Table_Demo9.vue
Unescape View File

@ -0,0 +1,79 @@
<template>
<el-table :data="tableData" :row-class-name="rowClassMethod">
<el-table-column prop="id" label="Id"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="score" label="Score"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "Table_Demo9",
data() {
return {
tableData: [
{
id: '12987122',
name: 'Tom',
score: '99'
},
{
id: '12987123',
name: 'black',
score: '81'
},
{
id: '12987124',
name: 'harry',
score: '70'
},
{
id: '12987125',
name: 'Jerry',
score: '58'
}
]
}
},
methods: {
rowClassMethod(e) {
console.log(e);
const {row} = e;
let rowClassName = "";
const score = row.score;
console.log(score)
if (score >= 85) {
console.log(1)
rowClassName = "excellent"
} else if (score > 75) {
console.log(2)
rowClassName = "good"
} else if (score > 65) {
rowClassName = "normal"
} else {
rowClassName = "bad"
}
return rowClassName
}
}
}
</script>
<style scoped>
.el-table :deep(.excellent) {
background-color: darkorange;
}
.el-table :deep(.good) {
background-color: cornflowerblue;
}
.el-table :deep(.normal) {
background-color: aliceblue;
}
.el-table :deep(.bad) {
background-color: #ff6666;
}
</style>
Write Preview
Loading…
Cancel
Save