1.可以通过总按钮整体控制
2.也可以单独选择
3.代码
<template>
<div>
<el-radio-group v-model="radio" @change="onChange" style="margin: 50px">
<el-radio :label="3">最高价</el-radio>
<el-radio :label="6">最低价</el-radio>
<el-radio :label="9">均价</el-radio>
</el-radio-group>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column label="市场价格">
<template slot-scope="scope">
<el-radio
v-model="item.checked"
v-for="(item, index) in scope.row.price"
:key="index"
:label="item.label"
@change="tableChange(item, scope.row.price)"
>
{{ item.name + ":" + item.num }}</el-radio
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
radio: 0,
tableData: [
{
date: "2016-05-02",
name: "电脑",
price: [
{ num: 80, name: "最高价", label: 3, checked: "" },
{ num: 70, name: "最低价", label: 6, checked: "" },
{ num: 75, name: "均价", label: 9, checked: "" },
],
},
{
date: "2016-05-04",
name: "手机",
price: [
{ num: 80, name: "最高价", label: 3, checked: "" },
{ num: 70, name: "最低价", label: 6, checked: "" },
{ num: 75, name: "均价", label: 9, checked: "" },
],
},
{
date: "2016-05-01",
name: "耳机",
price: [
{ num: 80, name: "最高价", label: 3, checked: "" },
{ num: 70, name: "最低价", label: 6, checked: "" },
{ num: 75, name: "均价", label: 9, checked: "" },
],
},
{
date: "2016-05-03",
name: "键盘",
price: [
{ num: 80, name: "最高价", label: 3, checked: "" },
{ num: 70, name: "最低价", label: 6, checked: "" },
{ num: 75, name: "均价", label: 9, checked: "" },
],
},
],
};
},
methods: {
// 可以通过总按钮整体控制
onChange() {
this.tableData.map((item) => {
item.price.map((iii) => (iii.checked = this.radio));
});
},
tableChange(item, row) {
row.map((iii) => {
iii.checked = 0;
});
item.checked = item.label;
},
},
};
</script>
<style>
</style>