彩蛋:后台管理系统一站式平台模板
vue-admin-wonderful,一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0
1 、简单版
<template>
<el-table :data="tableDemo.table" style="width: 100%">
<el-table-column :prop="v.prop" :label="v.label" :width="v.width" v-for="(v, k) in tableDemo.header" :key="k"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "tableDemo",
data() {
return {
tableDemo: {
table: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
header: [
{ label: "日期", prop: "date", width: "" },
{ label: "姓名", prop: "name", width: "" },
{ label: "地址", prop: "address", width: "" }
]
}
};
}
};
</script>
2、灵活版
<template>
<el-table :data="tableDemo.table" style="width: 100%">
<el-table-column :label="v.label" :width="v.width" v-for="(v, k) in tableDemo.header" :key="k">
<template slot-scope="scope">
<div v-if="!v.isStatus">{{scope.row[v.prop]}}</div>
<div v-else>
<el-tag :type="scope.row[v.prop] | isTypeColor">{{scope.row[v.prop] | isType}}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "tableDemo",
data() {
return {
tableDemo: {
table: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
status: 0
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
status: 1
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
status: 2
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
status: 0
}
],
header: [
{ label: "日期", prop: "date", width: "", isStatus: false },
{ label: "姓名", prop: "name", width: "", isStatus: false },
{ label: "地址", prop: "address", width: "", isStatus: false },
{ label: "状态", prop: "status", width: "", isStatus: true }
]
}
};
},
methods: {
handleClick(rowData) {
console.log(rowData);
}
},
filters: {
isType(type) {
let txt = "";
switch (Number.parseInt(type)) {
case 0:
txt = "正常";
break;
case 1:
txt = "异常";
break;
case 2:
txt = "未知";
break;
}
return txt;
},
isTypeColor(type) {
let color = "";
switch (Number.parseInt(type)) {
case 0:
color = "success";
break;
case 1:
color = "danger";
break;
case 2:
color = "info";
break;
}
return color;
}
}
};
</script>
3、表格多选,多选框时翻页记住之前选择的数据 :reserve-selection=“true”
<template>
<el-table :data="tableData" :row-key="setRowKey" @selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
name: "tableDemo",
data() {
return {
tableData: [
{ id: 1, date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" },
{ id: 2, date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" }
]
}
},
methods: {
setRowKey(row) {
return row.id
},
handleSelectionChange (data) {
console.log(data)
}
}
};
</script>