vue实现table表格里面数组多层嵌套取值

下面就是具体的步骤。

步骤

1. 首先，在table组件中，需要在columns中定义表格的列信息，每个列的field属性对应每一行数据的字段名。
   javascript
columns: [
{label:'ID',field:'id'},
{label:'用户名',field:'userName'},
{label:'手机号码',field:'phone'},
{label:'订单信息',field:'orderList'},
]
2. 其次，在数据源中，需要给orderList字段赋值，这个字段是一个多层嵌套的数组。例如：
   javascript
data: [
{id:'1',userName:'张三',phone:'123456789',orderList:[
{orderId:'1',price:'100',product:{'name':'苹果','color':'红色'}},
{orderId:'2',price:'200',product:{'name':'香蕉','color':'黄色'}},
]},
{id:'2',userName:'李四',phone:'987654321',orderList:[
{orderId:'3',price:'300',product:{'name':'菠萝','color':'黄色'}},
{orderId:'4',price:'400',product:{'name':'橙子','color':'橙色'}},
]}
]
3. 然后，在表格中，可以通过formatter属性来对指定列的值进行格式化，这里就可以对orderList字段进行处理，返回需要展示的内容。
   javascript
{label:'订单信息',field:'orderList',formatter:function(row,column,value){
let orderHtml = '';
for(let i=0;i<value.length;i++){
orderHtml += `<p>订单编号：${value[i].orderId}</p>
<p>订单价格：${value[i].price}</p>
<p>商品名称：${value[i].product.name}</p>
<p>商品颜色：${value[i].product.color}</p>`;
}
return orderHtml;
}}
4. 最后，就可以渲染出多层嵌套数组的数据了。

示例

示例1

如果数据源中的字段名为price，则在表格列中定义如下：
javascript
{label:'商品价格',field:'price'}
即可渲染出商品价格这一列的数据。

示例2

如果数据源中的字段名为product，需要展示该条数据中的颜色这一字段，则在表格列中定义如下：
javascript
{label:'商品颜色',field:'product',formatter:function(row,column,value){
return value.color;
}}
即可渲染出商品颜色这一列的数据。

至此，vue实现table表格里面数组多层嵌套取值的完整攻略结束。