mybatis、elementui后端传值前端展示问题

我们应该有这样一个常识，当后台向前台返回数据时，除了普通类型字段之外(如文本)，所有有关联关系的，我们都应该返回一个对象；
比如我数据库中有个requence字段(该字段数据库中存储为varchar等普通字段)，这个字段关联另一个对象的主键，也就是说通过这个字段可以找到另外一个对象(对象a)，我们称之为映射；
而现在我只需要a中的name，如下所示，我们不应该返回name，而是应该将整个对象返回，你如果返回name的话当我在前端修改这行数据时，岂不是要根据这个name去查到id？因为我数据库中保存的是id啊，这不是麻烦了吗

然后，前台拿到这个对象后直接.name就能展示了：

<el-table-column prop="customerSource.name" label="客户来源" width="170">

这是最简单的做法，

=============================
如果要添加分页等功能的话，因为有多个对象你需要用List将你的对象保存起来：

    @Override
    public PageResult<T> selectPageByQuery(BaseQuery baseQuery) {
        Long total = getBaseMapper().getTotalDataCount(baseQuery);
        if (total == 0L) {
            return new PageResult<>();
        }
        List<T> result = getBaseMapper().selectPageByQuery(baseQuery);
        return new PageResult<>(total, result);
    }

关联对象通过association来映射

    <select id="selectPageByQuery" resultMap="customerResultMap">
        SELECT c.id,c.name,c.gender,c.tel,c.seller,i.requence,
        i.id iid,i.name iname,e.sn ssn,e.id sid,e.username susername
        FROM t_customer c
        LEFT JOIN t_systemdictionaryitem i ON c.customerSource = i.requence
        LEFT JOIN t_employee e ON c.seller = e.sn
        <include refid="whereSql"/>
        LIMIT #{begin},#{pageSize}
    </select>
    <resultMap id="customerResultMap" type="Customer">
        <id column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="gender" property="gender"/>
        <result column="tel" property="tel"/>
        <association property="seller" javaType="Employee">
            <id column="sid" property="id"/>
            <result column="susername" property="username"/>
            <result column="ssn" property="sn"/>
        </association>
        <!-- 查数据字典明细中查出来的值封装到实体类的customerSource属性中去 -->
        <!-- 注意这两者的属性必须一致 -->
        <association property="customerSource" javaType="SystemDictionaryItem">
            <id column="iid" property="id"/>
            <result column="requence" property="requence"/>
            <result column="iname" property="name"/>
        </association>
    </resultMap>

后端返回的分页对象：

public class PageResult<T> {
    /* 返回总条数 */
    private Long total;
    /* 返回分页数据 */
    private List<T> result = new ArrayList<>();

前端将后端返回的对象解析保存到指定的数组中：

                this.$http.patch("/customer/selectPageByQuery", param).then(res => {
                    /* 这种东西我们一般将res打印出来找到我们需要的属性来填充就好了 */
                    this.customers = res.data.result;
                    this.total = res.data.total;
                    this.listLoading = false;
                });

打印customers看看：


当前所有值都是存在customers中的
而我们前端展示的列表是和customers绑定的，于是就可以直接点了：

        <!-- 列表 -->
        <el-table :data="customers" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="100" label="id">
            </el-table-column>
            <el-table-column prop="name" label="客户名称" width="170">
            </el-table-column>
            <!-- :formatter将0\1分别转换成女和男显示 -->
            <el-table-column prop="gender" label="性别" :formatter="genderFormatter" width="170">
            </el-table-column>
            <el-table-column prop="tel" label="电话" width="170">
            </el-table-column>
            <el-table-column prop="seller.username" label="营销人员" width="170">
            </el-table-column>
            <el-table-column prop="customerSource.name" label="客户来源" width="170">
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>