vue项目开发中,如何实现el-table
表格全选、指定选中、取消选中等功能,下面web建站小编给大家详细介绍一下具体实现代码!
template代码
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="age" label="年龄" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[3]])">切换第四行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template>
script代码
<script> export default { data() { return { tableData: [], multipleSelection: [] } }, methods: { //如果定义了指定选中项,点击选中指定项,否则取消选中 toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; } } } </script>
el-table利用:row-style="rowClass"设置指定行变色
el-table表格显示selection多选时对某些复选框设置禁止选中
el-dialog中获取el-table组件的ref值报undefined错误!
标签: el-table, el-table多选, selection
上面是“el-table表格实现多选功能(全选/指定选中/取消选中)”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_4082.html
workflows工作流
一只可爱的小鸟在飞翔ComfyUI工作流
一颗闪闪发光的水晶漂浮在森林里
一只张大嘴巴露出锋利的牙齿正在咆哮的雪豹
一棵树从鸟笼里长出来的梦幻般场景
一个穿过泥泞雷区的士兵ComfyUI工作流
一只在星系中漂浮宇宙生物ComfyUI工作流
一位穿着优雅银色装饰黑色连衣裙的苗条模特
一头巨大的古代大象背后建着一座城市
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!