Using the element-ui el-table of the table (how to take all the data of the current column)

Basic use is not to say,

We know this spreadsheet component, the content of each cell is an attribute determines the data table bound, but if we want based on property value, rendering it another value, the first question is, how do I get the current value of the column,

Search of the investigation, we can customize the display of content from the slot

template

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          {{aa(scope.row.name)+scope.$index}}
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

data

TableData: [{ 
            DATE: '2016-05-02' , 
            name: 'Bob' , 
            address: 'Jinsha Putuo District Road Lane 1518' 
          }, { 
            DATE: '2016-05-04' , 
            name: 'Small super ' , 
            address: ' Jinsha Putuo District Road Lane 1517 ' 
          }, { 
            DATE: ' 2016-05-01 ' , 
            name: ' tiger ' , 
            address: ' Jinsha Putuo District Road Lane 1519 ' 
          }, { 
            DATE: '2016-05-03' , 
            name:'Wang Hu' ,
            address: 'Putuo District Jinsha Road Lane 1516' 
          }]

methods

aa(name){
      var str=''
      switch(name) {
        case '小明':
            str="哈哈"
            break;
        default:
            str=name;
      } 
      return str;
    }

Code appeal, template yellow part is custom cell content manner (named slot)

scope.row: you can take all the data of the current column

scope $ index:. is the index of the current column

One effect is to appeal the code, when the name attribute is a column Xiaoming, the display cell in the "ha"