elementUI-table中点击行和radio按钮都可以实现单选

最新推荐文章于 2024-04-17 03:44:28 发布

原创最新推荐文章于 2024-04-17 03:44:28 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍在 ElementUI 的 table 组件中实现单选功能的方法。通过绑定 materialId 到 el-radio 和监听 current-change 事件，使得点击行或单选按钮都能实现单选效果，同时介绍了如何获取当前选中行的数据。

elementUI-table中点击行和radio按钮都可以实现单选

		<el-table
          :data="mlist"
          highlight-current-row
          border
          style="width: 100%"
          @current-change="handleCurrentChange">
          	<el-table-column label="" width="35" align="center">
              <template slot-scope="scope">
                  //label设置不同标识
                  <el-radio :label="scope.row.materialId"  v-model="tempRadio" 								@change="getTemplateRow(scope.row)"></el-radio>
              </template>
          </el-table-column>
			//省略
			//......
		</el-table>
	//currentRow和tempRadio是全局定义的变量
	//选中按钮时获取当前行数据
    selectHandle(index,row){                            
        this.currentRow = row;
    },
     //点击表格中每一行也能选中单选按钮,选择改行数据   
     handleCurrentChange(row){
         //如果没有row,终止
         if(!row) return
         //把当前行label绑定的值和v-model绑定的值相同时,单选按钮就可以选中
         this.tempRadio = row.materialId
         this.currentRow = row
     }

在这里插入图片描述