element UI中table组件实现单选操作
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
项目中使用element UI的table组件实现选择短信模板的功能,需要用到单选按钮,实现效果:

代码:
<el-table :data="shortTemplateData" border style="width: 100%" ref="multipleTable"> <el-table-column label="" width="65"> <template scope="scope"> <el-radio :label="scope.row.messageTemplateId" v-model="templateRadio" @change.native="getTemplateRow(scope.$index,scope.row)"> </el-radio> </template> </el-table-column> <el-table-column prop="messageTemplateBody" label="模板内容" min-width="500"> </el-table-column> </el-table> <div class="pagination"> <el-pagination @current-change ="handleCurrentChange" layout="total,prev, pager, next" :total="pageTotal" :page-size="pageSize"> </el-pagination> </div>
其中:

因为label的原因,会在radio后面有短信模板ID出现,所以添加了‘  ’以空格显示。
获取数据的方法:
getTemplateRow(index,row){ //获取选中数据
this.templateSelection = row;
},
因为是通用组件,所以获取了整个row中的数据,需要时在页面中单独获取。
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)