Escenario del proyecto:
Escenario del proyecto: es necesario usar listas con frecuencia para presentar datos. Es imposible escribir un formulario cada vez. El formulario se puede encapsular como un componente, al que se puede llamar directamente cuando sea necesario.
Mostrar resultados:
Estructura del proyecto:
Implementación:
Table.view
<!--
component:列表
time:2022/11/15
UserData:列数据
tableConfig:表格的列配置，[UserId,key,label,width]
getTableHeaderStyle:表格CSS类名
表格数据：
tableConfig:[
{
label:'姓名',
width:150,
key:'UserName'
}
]
UserData:[
{
"UserId":"1",
"UserName":"杠铁侠",
"UserNameValue":'1',
"UserGender":"男",
"UserAge":"31",
"UserItem":"斯塔克工业",
"UserItemValue":"1",
"UserPostion":"Java工程师",
"UserPostionValue":"1",
"UserPhone": "15987462455",
"UserEmail": "[email protected]",
"UserEntryTime":"2020-8-27",
"Useraddress":"上海市普陀区金沙江路 1518 弄"
},
]
-->
<template>
<div class="UserTable">
<el-table
:data="UserData"
style="width: 100%"
:header-cell-style="getTableHeaderStyle"
>
<template slot="empty">
<el-empty :image-size="100" description='暂无数据'></el-empty>
</template>
<el-table-column
v-for="column in tableConfig"
:key="column.UserId"
:prop=column.key
:label=column.label
:width=column.width>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
Userdata:[],
tableconfig:[],
}
},
props:{
tableConfig:{
default(){
return [];
}
},
UserData:{
default(){
return [];
}
},
},
methods: {
getTableHeaderStyle(){
return "background:#eee"
},
handleClick(row) {
console.log(row);
},
},
}
</script>
<style>
.el-table{
padding: 0px 10px 0px 0px;
}
.el-table__body-wrapper{
padding-bottom: 10px;
}
</style>
UserManagement.vue
<template>
<!-- 只需要传入数据及配置 -->
<Table :UserData="Userdata" :tableConfig="tableconfig"></Table>
</template>
<script>
import UserData from '@/data/User'
import Table from '@/views/components/Table.vue'
export default {
props:{
UserData},
components:{
Table
},
data(){
Userdata:[],
tableconfig:[],
}
methods(){
Tableconfig(){
//列表配置
this.tableconfig = [
{
//用户姓名
label:'姓名',
width:140,
key:'UserName',
},
{
//用户性别
label:'性别',
width:140,
key:'UserGender',
},
{
//用户年龄
label:'年龄',
width:140,
key:'UserAge',
},
{
//用户团队
label:'团队',
width:180,
key:'UserItem',
},
{
//用户职位
label:'职位',
width:200,
key:'UserPostion',
},
{
//用户电话
label:'电话',
width:200,
key:'UserPhone',
},
{
//用户邮箱
label:'邮箱',
width:250,
key:'UserEmail',
},
{
//用户入职时间
label:'入职时间',
width:150,
key:'UserEntryTime',
},
{
//用户地址
label:'地址',
width:300,
key:'Useraddress',
},
]
},
},
mounted(){
this.Userdata = UserData
this.Tableconfig()
},
}
</script>