Element: table prop怎么获取数组的值

[BusyHe]

tableData3: [{
                    date: '2016-05-03',
                    add: '王小虎',
                    dayList: [0, 1, 2, 3, 4, 5, 6]
                }],

<el-table-column
                            prop="dayList[0]"
                            label="一"
                            min-width="120">
                    </el-table-column>

prop没办法得到daylist[0]

[wenner]

用template写比较好吧

<el-table-column>
  <templte scope="prop">
    {{prop.row.dayList[0]}}  
  </template>
</el-table-column>

[BusyHe]

@wenner 这个是官方的模板，我把props的参数改了一下

[wenner]

官方的模板?你说的是哪个?
prop = "dayList[0]" , 这样写应该不行 , 因为看代码render中没有这样处理的

const DEFAULT_RENDER_CELL = function(h, { row, column }) {
  const property = column.property;
  if (column && column.formatter) {
    return column.formatter(row, column);
  }

  if (property && property.indexOf('.') === -1) {
    return row[property];
  }

  return getValueByPath(row, property);
};

如果要简单点,不写template可以写formatter....

<el-table-column :formatter = "cellFormatter"></el-table-column>
method:{
    cellFormatter(row , cell){
        return row.dayList[0];
    }
}

[BusyHe]

按照你写的没有生效，有没有纤细点的，目前我按官方的这样处理的

<el-table
                    :data="tableData3"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="日期"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        prop="add"
                        label="新增"
                        min-width="120">
                </el-table-column>
                <el-table-column label="七天留存率">
                    <el-table-column
                            prop="a"
                            label="一"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="b"
                            label="二"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="c"
                            label="三"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="d"
                            label="四"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="e"
                            label="五"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="f"
                            label="六"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="g"
                            label="七"
                            min-width="120">
                    </el-table-column>
                </el-table-column>
            </el-table>

tableData3: [{
                    date: '2016-05-03',
                    add: '1221',
                    a:'1',
                    b:'2',
                    c:'3',
                    d:'4',
                    e:'5',
                    f:'6',
                    g:'7'
                }],

[wenner]

后面这个是想实现什么???

跟前面那个不一样?

[BusyHe]

1. 我之前不是用了

tableData3: [{
                    date: '2016-05-03',
                    add: '王小虎',
                    dayList: [0, 1, 2, 3, 4, 5, 6]
                }],

不行，然后按照你的方法，也不行。所以目前按照官方的

prop="key"

的做法，把dayList拆分开来，

目前我吧template和date都贴出来你看看，能不能说的详细一点怎么修改
@wenner 谢谢

[wenner]

<template>
    <el-table :data="tableData3" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column label="七天留存率">
        <el-table-column border
          v-for='day in days' 
          :formatter="dayFormatter" 
          :label="day">          
        </el-table-column>
      </el-table-column>
    </el-table>
  </template>

export default {
      data() {
        return {
          days:[
            "一" , "二" , "三" , "四" , "五" , "六" , "七"
          ] ,
          tableData3: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    dayList: [0, 1, 2, 3, 4, 5, 6]
          }]
        }
      } , 
      methods:{
        dayFormatter(row , column){
            var dayList = row.dayList;
            var ix = this.days.indexOf(column.label);
        if (ix==-1 || ix >= dayList.length) return;
            return row.dayList[ix];
        }
      }
}

我这样试了一下, 是可以运行的...
如果想不依赖days这个数组,也同样可以自己写 , 然后可以写prop , 然后再formatter中解析prop , 再去row中取值
PS:prop只能是string

[BusyHe]

万分感谢