vue-车辆管理系统结合vue、elementui

1.展示所有车型列表

1.多对多展示
用elementui展示后端车型列表:
由于后端传过来的数据是数组套对象(经销商和车型是多对多关系，一个车型可以对应多个经销商)，我们用普通的table表单可以很快写出，对这个字段进行for循环。
但是在elementui中我们无法这样做，因为elementui本身自带一个for循环，我们只需要将后端传入表的字段写入即可。这对于不存在多对多关系的表很容易，但是对于多对多显得不那么友好。
以车辆管理系统为例，一个车型可以对应多个经销商，思路和之前相同，但是对经销商列表循环时要注意:scope.row就是本次循环的车型对象

<template>

  <div class="carmodel">
    <h1>查看所有车型</h1>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <el-table :data="carlist" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column type="index" :index="indexMethod" label="序号" width="180"></el-table-column>
          <el-table-column prop="name" label="车型" width="180"></el-table-column>
          <el-table-column prop="price" label="价格" width="180"></el-table-column>
          <el-table-column prop="car_factory_detail.name" label="车厂"></el-table-column>
          <el-table-column label="经销商">
              <template slot-scope="scope">
                <span v-for="item in scope.row.distributor_list">  <!--scope.row就是本次循环的车型对象，.distributor_list拿到的就是这个车型对应的经销商列表(数组)-->
                  <span>{{item.name}}&nbsp;</span>
                </span>
              </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>

</template>

2.序号问题
当我们在后端表中没有传入pk字段，可以通过elementui直接自动生成序号:

<template>
<el-table :data="carlist" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column type="index" :index="indexMethod" label="序号" width="180"></el-table-column>
          </el-table-column>  <!--序号字段-->
        </el-table>
</template>

<script>
methods:{
indexMethod(index) {
        return index + 1;
      }  // index + 1表示第一个数字是1，以1递增。，index+2就是以2递增
}

</script>