Vue+Element 实现表格单选

Vue+Element 实现表格单选

实现效果：
表格可以单选，且有按钮

Element网站的试了没有实现，可能代码还有问题，且每行前面没有选择按钮。

1.
修改代码：

		<el-table-column slot="before" label="选择" width="60px" align="center" header-align="center">
            <template slot-scope="scope">
              <el-radio
                v-model="templateRadio"
                :label="scope.$index+1"
                style="margin-left: 10px;"
                @change.native="getTemplateRow(scope.$index,scope.row)"
              />
            </template>
          </el-table-column>

新增一列，就是显示的单选按钮，label默认是序号加1。

2.

templateRadio: false,
templateSelection: {},

在data里新增定义两个参数，templateRadio默认为false（改成true也没什么影响），默认不选中，templateSelection是保存选中的行信息。

3.

getTemplateRow(index, row) {
      this.templateSelection = row
}

将选中的行数据赋值到templateSelection 。