ElementUI 中table组件

 实现table首列是radio单选：

  <el-table
      :data="tableData"
      @current-change="handleCurrentChange"
      style="width: 100%">
  <el-table-column label="" width="65">
     <template scope="scope">
     <el-radio :label="scope.row.index" v-model="selected"
   @change.native="setSelected(scope.row.index,scope.row)">
     {{''}}</el-radio>
        </template>
    </el-table-column>
      <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
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

 这里由于 <el-radio>没有要显示的值，但是不设置又会显示为lable的值，所以使用了{{''}}

   @current-change="handleCurrentChange" 当单击行的非radio组件部分也可选中实现。

var Main = {
      data() {
        return {
          selected:'',
          tableData: [{
            index:1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
                        index:2,

            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {                        index:3,

            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            index:4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
  
     methods: {
    setSelected(index,row){      
      console.log(index,row)
      //获取选中数据
    this.selected = index;
},
       handleCurrentChange(val){
               console.log(val)

             this.selected = val.index;

       }
    }

    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')