在elementui里,table是怎么加上单选框的呢? 啥都不用想了,复制粘贴下面代码就可以了。
<template> <div id="temglic"> <el-table :data="tableData" border style=" 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>
效果: