el-table 实现radio单选

最新推荐文章于 2025-03-21 17:13:40 发布

你的丶寒王

最新推荐文章于 2025-03-21 17:13:40 发布

阅读量238

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_42185008/article/details/145776781

版权

在这里插入图片描述

<el-table
	:data="tableData"
	stripe
	size="small"
	style="width: 100%"
>
	// radio
	<el-table-column  width="40">
		<template slot-scope="scope">
			<el-radio v-model="choosedTableRadio" :label="scope.row.id" @input="handleSelectionChange(scope.row)"></el-radio>
		</template>
	</el-table-column>
	// table内容
	<el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
</el-table>

data() {
   return {
	choosedTableRadio: '',
	tableData: [{
		id: '1',
       date: '2016-05-02',
       name: '王小虎1',
       address: '上海市普陀区金沙江路 1518 弄'
     }, {
		id: '2',
       date: '2016-05-04',
       name: '王小虎2',
       address: '上海市普陀区金沙江路 1517 弄'
     }, {
		id: '3',
       date: '2016-05-01',
       name: '王小虎3',
       address: '上海市普陀区金沙江路 1519 弄'
     }, {
		id: '4',
       date: '2016-05-03',
       name: '王小4',
       address: '上海市普陀区金沙江路 1516 弄'
     }]
   };
 },

methods: {
	handleSelectionChange(currentRow){
		this.choosedTableRadio = currentRow.id
		console.log(this.choosedTableRadio)
	}
  }