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

    },

巴特西

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

最新文章

热门文章