使用表格组件时如下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>

在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐