element-ui中el-table表格的使用（如何取到當前列的所有數據）

基本使用都不多說了，

我們知道這個表格組件，每個單元格內容是table綁定的data中的某個屬性決定的，但是如果我們想根據這個屬性值，渲染出另一個值呢，首先問題來了，我如何獲得當前列的值，

查了查，我們可以用插槽來自定義顯示的內容

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: '小明',
            address: '上海市普陀區金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '小超',
            address: '上海市普陀區金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '小虎',
            address: '上海市普陀區金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王虎',
            address: '上海市普陀區金沙江路 1516 弄'
          }]

methods

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

上訴代碼，template中黃色部分就是自定義單元格內容的方式（具名插槽）

scope.row：可以取到當前列的所有數據

scope.$index：是當前列的索引

上訴代碼的一個作用是，當列的name屬性是小明時，在該單元格顯示“哈哈”