使用表格组件时如下prop可以通过对象调用获取属性名
<el-table>
<el-table-column
prop="deptId.deptId"
label="所属部门">
</el-table-column>
</el-table>
完整的示例代码
数据部分
staffData: [
{
staffId: '1',
deptId: {
deptId: "1",
deptName: "人事"
},
staffNum: '33088',
staffName: '张三',
position: {
jobId: "1",
jobName: "HR"
},
eduBackground: '硕士',
major: '社会经济学',
salary: '10000',
birthday: '1985-01-12',
picture: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1983025387,1753382711&fm=26&gp=0.jpg',
nativePlace: '北京-故宫',
nowAddress: '北京',
idcardNo: '123456789123456789',
phone: '123456789',
workSeniority: '5'
}
]
<el-table
ref="tableRef2"
:data="staffData"
style="width: 100%"
row-key="id"
border>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="staffNum"
label="员工号">
</el-table-column>
<el-table-column
prop="staffName"
label="姓名">
</el-table-column>
<el-table-column
prop="position.jobName"
label="职位">
</span>
</el-table-column>
<el-table-column
prop="deptId.deptId"
label="所属部门">
</el-table-column>
<el-table-column label="操作" width="230">
<template slot-scope="scope">
<el-button size="mini" class="optBtn"
type="danger" icon="el-icon-delete" circle
@click.native.prevent="staffDelete(scope.$index)"></el-button>
<el-button size="mini" class="optBtn"
type="warning"
icon="el-icon-edit" circle
@click.native.prevent="staffEdit(scope.$index, staffData)"></el-button>
<el-button size="mini" class="optBtn"
type="success" icon="el-icon-view" circle
@click.native.prevent="staffView(scope.$index, staffData)"></el-button>
</template>
</el-table-column>
</el-table>