Napsta's Blog

Vue

el-table-column遍历二维数组、对象

场景：需要使用el-table遍历接口获取的数据，但是url太长，故使用点击相应表格单元后弹出小列表的方式进行展示

方法1：使用slot获取对象中的对象，在popover中使用el-table：
<template>
      <el-table :data="tableData">
     	<el-table-column
            label="hosts"
            prop="hosts"
            width="150">
          	<template slot-scope="scope">
            	<el-popover
                	placement="right"
                	trigger="click"
                	width="400">
              		<el-table :data="scope.row.hosts">
                		<el-table-column label="Ip" prop="ip" width="100"></el-table-column>
                		<el-table-column label="Port" prop="port" width="100"></el-table-column>
                		<el-table-column label="BaseUrl" prop="baseUrl" width="180"></el-table-column>
              		</el-table>
              		<i slot="reference" class="table">hosts</i>
            	</el-popover>
          	</template>
        </el-table-column>
      </el-table>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
tableData:
[{hosts: [{baseUrl: "http://192.168.123.10:8080",ip: "192.168.123.10",port: "8080"},
 {hosts: [{baseUrl: "http://192.168.123.10:8080",ip: "192.168.123.10",port: "8080"},
 {hosts: [{baseUrl: "http://192.168.123.10:8080",ip: "192.168.123.10",port: "8080"},
 {hosts: [{baseUrl: "http://192.168.123.10:8080",ip: "192.168.123.10",port: "8080"}]
1
2
3
4
5
方法2：使用slot获取数组中的值，在popover中使用v-for遍历：
<!--template部分-->
<template>
    <el-table :data="tableData">
        <el-table-column
            label="urls"
            prop="urls">
            <template slot-scope="scope">
                <el-popover
                 placement="right"
                 width="400"
                 trigger="click">
                	<div class="urlContent">
                        <el-scrollbar>
                        	<label style="font-weight: bold">url</label>
                            <p v-for="(item, index) in scope.row.urls" :key="index">
                                {{item}}
    						</p>
    					</el-scrollbar>
    				</div>
                    <el-button type="text" class="table" slot="reference">查看</el-button>
    			</el-popover>
			</template>
        </el-table-column>
	</el-table>
</template>
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
//绑定tableData示意
tableData: 
[{cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]},
 {cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]},
 {cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]},
 {cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]},
 {cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]},
 {cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]},
 {cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]},
 {cookies: "xxxxxxxx",urls: ["Google","Runoob","Taobao"]}]
1
2
3
4
5
6
7
8
9
10