功能示例地址：javascript
http://vscss.com/vue/1.htmlcss
http://vscss.com/vue/2.htmlhtml
功能代碼：vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <title>element-ui單選表格行</title> <meta name="description" content="test"> <meta name="Keywords" content="test"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="app"> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="showRow" @current-change="handleCurrentChange" highlight-current-row > <el-table-column width="50"> <template scope="scope"> <!-- <el-radio v-model="radio" :label="scope.$index" @change.native="getCurrentRow(scope.$index)"> </el-radio> --> <el-radio v-model="radio" :label="scope.$index"> </el-radio> </template> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script type="text/javascript"> let vm = new Vue({ el: '#app', data() { return { radio: '', tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }] } }, methods: { showRow(row) { //賦值給radio this.radio = this.tableData.indexOf(row); }, getCurrentRow(val) { console.log(val); }, handleCurrentChange(currentRow, oldCurrentRow){ console.log(currentRow); this.currentRow = currentRow; this.getCurrentRow(this.tableData.indexOf(currentRow)); } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <title>test</title> <meta name="description" content="test"> <meta name="Keywords" content="test"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="app"> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @current-change="handleCurrentChange" highlight-current-row> <el-table-column width="50"> <template scope="scope"> <el-checkbox-group v-model="checkedLists" @change="handleCheckedChange"> <!-- <el-checkbox-group v-model="checkedLists"> --> <el-checkbox :label="scope.$index" name="type"> </el-checkbox> </<el-checkbox-group> </template> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script type="text/javascript"> let vm = new Vue({ el: '#app', data() { return { checkedLists: [], tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }] } }, methods: { handleCheckedChange(value) { if (value.length > 1) { this.checkedLists = []; value.shift(); console.log(value); this.checkedLists.push(value[0]); } }, getCurrentRow(val) { console.log(val); this.checkedLists = []; this.checkedLists.push(val); }, handleCurrentChange(currentRow, oldCurrentRow) { console.log(currentRow); this.currentRow = currentRow; this.getCurrentRow(this.tableData.indexOf(currentRow)); } } }); </script> </body> </html>