首先不是选中某一行表格数据,是在一行el-table-column中的某一列有单选,并且这一页的单选只能选择一个!

html部分

//添加按钮
<el-button type="primary" style="float: right;" @click="addRow(tableData.length)">添加</el-button>
//表格
<el-table :data="tableData" style="width: 100%"   ref="tb" :row-class-name="tableRowClassName" @current-change="handleRadioChange">
	<el-table-column fixed prop="date" label="日期" ></el-table-column>
	<el-table-column prop="name" label="姓名" ></el-table-column>
	<el-table-column prop="province" label="本地" >
	//单选框部分
		<template slot-scope="scope">
			<el-radio  v-model="radio" :label="scope.row.index">本地</el-radio>
		</template>
	</el-table-column>
	<el-table-column fixed="right" label="操作" >
		<template slot-scope="scope">
				<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
		</template>
	</el-table-column>
</el-table>

效果就这样
在这里插入图片描述这个蛮重要的 我给它起名tableRowClassName
在这里插入图片描述

js部分

其中有添加(handleAddDetails),删除(deleteRow),单选框值改变(handleRadioChange)

	export default {
		data() {
			return {
			  radio: 0,
			  //给一个默认行
			  tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: 0
				}],
			}
		},
		methods:{
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.index = rowIndex; //在原有的数据上加一个index
			},
			handleRadioChange(val) {
				if (val) {
					console.log(val)
					this.radio = val.index;
				}
			},
			// 增加一行
			addRow(length) {
				if (this.tableData == undefined) {
					this.tableData = new Array();
				}
				let obj = {};
				obj.date = "2016-05-03";
				obj.name = "王小龙";
				obj.addresses = length;
				this.tableData.push(obj);
			},
			// 删除一行
			deleteRow(index) {
				this.tableData.splice(index, 1)

			},
		}
	}

最后结果就这样,点击添加就会在最后追加一行 点击移除会删除一行,表格中的单选框只会选择一个
在这里插入图片描述
如果里边还有el-select选择框的话 (此处随便加一个)

<el-table-column prop="food" label="食物">
						<template slot-scope="scope">
							<el-select v-model="tableData[scope.$index].food" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</template>
					</el-table-column>


/*
别忘了给tableData加上food
tableData: [{
				date: '2016-05-02',
				name: '王小虎',
				address: 0,
				food: '黄金糕'
			}],
options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
*/

在这里插入图片描述
关键在于v-model绑定的值! v-model=“tableData[scope.$index].food”

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐