在vue项目中遇到一个需求是要展示单选表格的。
代码如下:
<template>
??<el-radio-group?v-model="radioGroup">
????<el-table?:data="tableData"?border?style="width:?600px;?margin:?20px">
??????<el-table-column?align="center"?width="30">
????????<template?slot-scope="scoped">
??????????<el-radio?@click.native.stop="handRadio"?:label="scoped.row">
??????????</el-radio>
????????</template>
??????</el-table-column>
??????<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?prop="address"?label="地址">?</el-table-column>
????</el-table>
??</el-radio-group>
</template>
??<script>
export?default?{
??data()?{
????return?{
??????radioGroup:?{},
??????tableData:?[
????????{
??????????date:?"2016-05-02",
??????????name:?"王小虎",
??????????address:?"上海市普陀区金沙江路?1518?弄",
????????},
????????{
??????????date:?"2016-05-04",
??????????name:?"王小虎",
??????????address:?"上海市普陀区金沙江路?1517?弄",
????????},
????????{
??????????date:?"2016-05-01",
??????????name:?"王小虎",
??????????address:?"上海市普陀区金沙江路?1519?弄",
????????},
????????{
??????????date:?"2016-05-03",
??????????name:?"王小虎",
??????????address:?"上海市普陀区金沙江路?1516?弄",
????????},
??????],
????};
??},
??watch:?{
????'radioGroup':?{
??????handler(val)?{
????????console.log("radioGroup:",?this.radioGroup);
??????},
????},
??},
??methods:?{
????//?阻止单选冒泡? 此处是在做行点击事件时阻止事件冒泡。
????handRadio()?{},
??},
};
</script>
仅个人见解,不喜勿喷。