如何处理ele里面表格组件prop属性带.导致渲染不出来的问题

234 阅读1分钟

问题如下:

<div id="app">
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date."
      label="日期"
      width="180"
      :formatter="getprop"
    >
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      var app = new Vue({
    el: '#app',
    data: {
      tableData: [
        {
          'date.': '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          'date.': '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          'date.': '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          'date.': '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    },
    methods: {
      getprop(row, column, cellValue, index) {
        console.log(row, column, cellValue, index)
        return row[column.property]
      }
    }
  })

如上图所示,上面prop绑定的日期date带了一个.导致渲染不出来,如何解决这个问题呢,利用ele提供的formatter属性,注册一个方法,该方法可以获取到注册方法的那个属性的行和列还有值和下标,注意注册一定是在想要改变的属性那一行去注册,而不是给整个表格注册,然后就可以去打印获取到对应的值,用return去将属性对应的值返回出来