vue2 ElementUI2 el-table-column 使用数据遍历展示

之前一直使用React，在进行表格的column渲染时，都是使用数据遍历方式进行展示，使用写vue的时候也借用了同样的方式，ElementUI没有提供类似的demo，或者是我看到不够仔细； 具体实践下来并没有太多的坑，主要一个v-for就可以解决，暂时着重说一些这个formater，遇到了一点麻烦

formatter的使用，如果返回一般的文本值，没什么问题；但是再返回jsx时，必须将formatter函数的this指向到组件，这个我使用了bind处理，当然是有很多处理方式的；

// columns数据
const constants = {
    columns() {
        return [
          {
            prop: 'meetingName',
            label: '会议名称',
            width: 140
          },
          {
            prop: 'meetingRoom',
            label: '会议地点',
            width: 650,
            formatter: (row, column, cellValue) => {
              // 返回jsx的formatter，涉及this指向问题 
              const rooms = cellValue.split(';')
              return <div class="classRoomCell">
                {
                  rooms.map((item) => <div>{item}</div>)
                }
              </div>
            }
          },
          {
            prop: 'creater',
            label: '创建人',
            width: 100
          },
          {
            prop: 'meetingDate',
            label: '会议日期',
            width: 100
          },
          {
            prop: 'startTime',
            label: '会议时间',
            width: 110,
            formatter(row) {
              // 返回纯文本的formatter没有什么问题，直接使用即可
              return `${row.startTime} - ${row.endTime}`
            }
          },
        ]
    }
}

data() {
    return {
      // 主要是这里要绑定this，这样columns方法才能获取组件实例，调用$createElement
      columns: constants.columns.bind(this)(),
    };
},

<el-table-column
    v-for="item in columns"
    :key="item.meetingRoomNo"
    :prop="item.prop"
    :label="item.label"
    :width="item.width"
    :formatter="item.formatter || null"
>
</el-table-column>