element表格单选

最新推荐文章于 2025-10-14 09:39:44 发布

原创最新推荐文章于 2025-10-14 09:39:44 发布 · 441 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

50 篇文章

订阅专栏

这篇博客展示了如何在Vue应用中利用el-table组件实现数据展示，并通过row-click事件监听行点击，结合el-radio实现单选功能。文章详细介绍了data属性的设置、showRow方法的逻辑，以及如何维护当前选中行的状态。

<el-table :data="gridData" border @row-click="showRow">
  <el-table-column label="" width="50" align="center">
    <template slot-scope="scope">
      <el-radio v-model="radio" :label="scope.$index">&nbsp;</el-radio>
  </template>
  </el-table-column>
  <el-table-column property="name" label="客户姓名" width="150"></el-table-column>
</el-table>

data() {
	return {
		gridData: [],
		radio: '',
    	selected:{},
   	}
}
showRow(row){
  this.radio = this.gridData.list.indexOf(row);
  this.selected=row;
},