elementUI table表格加入单选框
<template> <div class="page"> <el-table :data="tableData" ref="singleTable" highlight-current-row border style="width: 100%" > <el-table-column label="" width="40"> <template scope="scope"> <el-radio :label="scope.$index" v-model="currentRow" @change.native="getCurrentRow(scope.row)" style="color: #fff; padding-left: 10px; margin-right: -25px" ></el-radio> </template> </el-table-column> <el-table-column prop="date" label="日期"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { currentRow: 0, tableData: [ { date: "2016-05-02", name: "王小虎", index: "1", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", index: "2", address: "上海市普陀区金沙江路 1517 弄", }, { date: "2016-05-01", name: "王小虎", index: "3", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2016-05-03", name: "王小虎", index: "3", address: "上海市普陀区金沙江路 1516 弄", }, ], }; }, methods: { getCurrentRow(row) { console.log(row); }, }, }; </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步