el-table中加入el-select实现默认显示且可差异化每一行_el-table el-select

1.场景描述

项目中用到了element-ui的el-table组件，在表格中加入了下拉框，下拉框实现默认显示第一条数据。

2.出现的问题

v-model的值不知如何定义：服务器列表是个数组，每行的数据都不一样，如果绑定一个data中的一个变量，那么每一行绑定的值都是一样的，而且还不能默认显示第一值。

下面是错误示例：在data中定义一个变量serverId

<el-table ref="table":data="tableData" highlight current-row stripe style="width: 100%">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column prop="name" label="项目名称" />
    <el-table-column prop="servers" label="服务器列表">
    	<template slot-scope="scope">
            <el-select v-model="serverId" placeholder="请选择">
                <el-option
                   v-for="item in scope.row.servers"
                   :key="item.serverId"
                   :label="item.name"
                   :value="item.serverId"
                   />
            </el-select>
    	</template>
	</el-table-column>
</el-table>

放在data()中的假数据：
tableData: [
        {
          name: "项目1",
          servers: [
            { serverId: 1, name: "服务器1" },
            { serverId: 2, name: "服务器2" },
            { serverId: 3, name: "服务器3" },
          ],
        },
        {
          name: "项目2",
          servers: [
            { serverId: 7, name: "服务器4" },
            { serverId: 8, name: "服务器5" },
            { serverId: 9, name: "服务器6" },
          ],
        },
        {
          name: "项目3",
          servers: [
            { serverId: 4, name: "服务器7" },
            { serverId: 5, name: "服务器8" },
            { serverId: 6, name: "服务器9" },
          ],
        },
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

但会导致莫名奇妙的问题，本来都是服务器的列表，如果在某一行选择一个服务器，其他行的值直接变成了数值！！！

3.解决问题

用element-ui的选择器要想默认显示第一个值，v-model的值要与el-option中的:value的值相同。

如何定义这个v-model的值呢，这个值和其他行的还不能一样，还要实现和服务器的第一条数据的value值相同。

经过我苦苦冥想，想到一个方法就是将服务器的一条数据的id遍历到每行的数据列表中。

 mounted(){
    this.tableData.forEach(item=>{
      item.serverOne=item.servers[0].serverId;
    })
  },
1
2
3
4
5

将列表的v-model=scope.row.serverOne

<el-table-column prop="servers" label="服务器列表">
    	<template slot-scope="scope">
            <el-select v-model="scope.row.serverOne" placeholder="请选择">
                <el-option
                   v-for="item in scope.row.servers"
                   :key="item.serverId"
                   :label="item.name"
                   :value="item.serverId"
                   />
            </el-select>
    	</template>
	</el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12

此时已经可以默认显示第一个值了

但是又出现一个问题，当我在某一行选择服务器的时候，不能选择（最后发现是不能实时更新列表的label值，只有当你用数据点其他行时，服务列表的值才能更新）

发现问题之后，开始找资料，最后知道改变数组可以触发视图更新的方法：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

这些方法的作用我就不一一列举了，我只用了两个：插入方法push()和删除末尾方法pop()

<el-table-column prop="servers" label="服务器列表">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.serverOne"
            placeholder="请选择"
            @change="updateTable()"
          >
            <el-option
              v-for="item in scope.row.servers"
              :key="item.serverId"
              :label="item.name"
              :value="item.serverId"
            />
          </el-select>
        </template>
      </el-table-column> 
方法：
updateTable() {
      this.tableData.push("");
      this.tableData.pop();
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

到此实现下拉列表实现默认显示且可选择