饿了么表格单选只能选择列,希望前面有选择的框
法一:
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
@row-click="singleElection"
highlight-current-row
>
<el-table-column align="center" width="55" label="选择">
<template slot-scope="scope">
<!-- 可以手动的修改label的值,从而控制选择哪一项 -->
<el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
> </el-radio
>
</template>
</el-table-column>
<el-table-column align="center" prop="id" label="编号" width="80"> </el-table-column>
<el-table-column align="center" prop="date" label="日期" width="150"> </el-table-column>
<el-table-column align="center" prop="name" label="姓名" width="80"> </el-table-column>
<el-table-column align="center" prop="address" label="地址" width="250"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "0001",
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "0002",
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: "0003",
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: "0004",
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
// 当前选择的行的id
templateSelection: "",
// 当前选择的行的数据
checkList: [],
}
},
methods: {
singleElection(row) {
this.templateSelection = row.id
this.checkList = this.tableData.filter((item) => item.id === row.id)
console.log(`该行的编号为${row.id}`)
},
},
}
</script>
法二:
table的方法,clearSelection()清除表格选中,toggleRowSelection(ele, true) 手动选中。先取清除选中,再根据勾选你选择的那一条数据。
toggleRowSelection有两个参数一个是要选的数据,一个是该数据的状态,true选中,false不选
<template>
<div class="contentBox"
v-loading="loading">
<el-table :data="list"
ref="accountRef"
@select="handleTableChange">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column width="100" prop="name"></el-table-column>
<el-table-column width="100" prop="no"></el-table-column>
<el-table-column width="100" prop="date"></el-table-column>
</el-table>
</div>
</template>
<script>
import {
defineAsyncComponent,
defineComponent,
getCurrentInstance,
onMounted,
reactive,
toRefs,
} from "vue";
export default defineComponent({
components: { },
setup(props, context) {
const { proxy } = getCurrentInstance();
const accountRef = ref(null)
const data = reactive({
list: [],
selectTable: [],
});
//表格单选
const handleTableChange = (list, row) => {
if (list.length === 0) {
data.selectTable = [];
return
}
// let itemData = JSON.parse(JSON.stringify(row))
accountRef.value.clearSelection()
data.list.forEach((ele) => {
if (ele.id === row.id) {
accountRef.value.toggleRowSelection(ele, true)
data.selectTable = [ele];
}
})
};
return {
...toRefs(data),
handleTableChange,
accountRef
};
},
});
</script>