在elementui里,table是怎么加上單選框的呢? 啥都不用想了,復制粘貼下面代碼就可以了。
<template> <div id="temglic"> <el-table :data="tableData" border style="width: 100%"> <!-- 單選按鈕,占這么寬干嘛,給他width="40"就行了 ,要想單擊行,必須加上@row-click 和 highlight-current-row --> <el-table-column align="center" fixed="left" width="40" @row-click="handleClickRow"> <template scope="scope"> <!-- 這垃圾elementUI,多出一行序號的列,怎么辦呢,在el-radio標簽之間給他個nbsp 就好了(然后特么的雖然給了這個,但是樣式還是有問題,所以最后加了個style,見下面) --> <el-radio :label="scope.$index" @change.native="getCurrentRow(scope.row)" v-model="radio" :show-overflow-tooltip="false" > </el-radio> </template> </el-table-column> <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="省份"></el-table-column> <el-table-column prop="city" label="市區"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="zip" label="郵編"></el-table-column> </el-table> </div> </template> <script> export default { name: "HelloWorld", data() { return { radio: "", // 選中項 tableData: [ { date: "2016-05-02", name: "王小虎", province: "上海", city: "普陀區", address: "上海市普陀區金沙江路 1518 弄", zip: 200333 }, { date: "2016-05-04", name: "王小虎", province: "上海", city: "普陀區", address: "上海市普陀區金沙江路 1517 弄", zip: 200333 }, { date: "2016-05-01", name: "王小虎", province: "上海", city: "普陀區", address: "上海市普陀區金沙江路 1519 弄", zip: 200333 }, { date: "2016-05-03", name: "王小虎", province: "上海", city: "普陀區", address: "上海市普陀區金沙江路 1516 弄", zip: 200333 } ] }; }, methods: { getCurrentRow(row) { // 獲取選中數據 console.log(row); }, handleClickRow(row) { this.radio = row.id console.log(this.radio); }, } }; </script> <style lang="css"> /* 這個樣式很重要的,垃圾elementUI里多出一列,然后顯示省略號,把他隱藏就好 */ .el-radio__label{ display: none; } </style>
效果: