首页 > 其他 > 详细

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

时间:2019-10-15 19:20:22      阅读:1372      评论:0      收藏:0      [点我收藏+]

官方文档: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来选中单选按钮

      <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;
    }

 

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

原文:https://www.cnblogs.com/flypig666/p/11679566.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!