vue elementui点击表格当前行radio单选选中

官方文档:https://element.eleme.cn/#/zh-CN/component/radio

参考:https://www.cnblogs.com/steamed-twisted-roll/p/10120106.html

   https://segmentfault.com/q/1010000016009668

   https://segmentfault.com/q/1010000018827314

关键的几个配置:

  higlight-current-row   // element-ui提供的单选方法,可以使当前选中行高亮

  @current-change="handleSelectionChange"  //单选方法,返回选中的表格行 

  使用v-model绑定单选框,

  :label的绑定属性为:label="scope.row.id",采用每条项目唯一的标识值

  handleSelectionChange的方法使用this.radio = row.id来选中单选按钮

  @row-click="chooseone":单击数据行
      <el-table
        :data="list"
        height="500"
        border
        style="width: 100%"
        @row-click="chooseone"
        @row-dblclick="openDetails"
        highlight-current-row
        @current-change="handleSelectionChange"
      >
        <el-table-column width="55">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row.id">
              <span class="el-radio__label"></span>
            </el-radio>
          </template>
        </el-table-column>
 data() {
    return {
      total: 0, //总记录数
      currentPage: 1, //当前页码
      pageSize: 10, // 每页显示10条数据
      list: [],
      radio: null, // 如果使用单选框,定义一个model值
      currentSelectItem: {} //当前选中的值
    };
    handleSelectionChange(row) {
      console.log(row);
      this.currentSelectItem = row;
    }
    chooseone(row){
      this.radio = row.id
    },

 

posted @ 2019-10-15 18:53  小飞猪咯咯  阅读(...)  评论(...编辑  收藏