使用elementui的级联选择器实现多分组多选项的多选效果
需求:实现多选表中的字段
1.多选框--checkbox
要实现多选效果,首先想到的是多选框--checkbox,可以使用多选框组来实现多选功能。
checkbox-group
元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model
绑定Array
类型的变量即可。 el-checkbox
的 label
属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。label
与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。
<template> <el-checkbox-group v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="选中且禁用" disabled></el-checkbox> </el-checkbox-group> </template> <script> export default { data () { return { checkList: ['选中且禁用','复选框 A'] }; } }; </script>
效果为:
2.el-table表格的多选功能
后来得知想要实现的是:多选多个表中的多个字段。为了页面美化,想到使用el-table表格的多选功能来实现。
实现多选非常简单: 手动添加一个el-table-column
,设type
属性为selection
即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip
属性,它接受一个Boolean
,为true
时多余的内容会在 hover 时以 tooltip 的形式显示出来。
<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 label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], 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>
效果为:
在实际应用当中,要用到多个表格,且表格数目不定,所以此处要用到for循环,来实现多表格的展现。随后又遇到一个问题,想要取到某表格的多选数据,需要此表格的ref属性来获取。
<template> <div v-for="(item,index) in fieldoption"> <el-table ref="`multipleTable${index}`" :data="item.tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> ... <el-table-column width="55"> ... </el-table-column> ... </el-table> </div> </template>
使用this.$refs.multipleTable${index},此处的index无法确定值,所以放弃使用循环表格的多选方案。
3.cascader
下拉框也可以实现多选效果,但不能实现多表格多选项的多选,即要实现将数据分组的多选,于是最终选择使用级联选择器--cascader。
<div class="block"> <span class="demonstration">默认显示所有Tag</span> <el-cascader :options="options" :props="props" clearable></el-cascader> </div> <script> export default { data() { return { props: { multiple: true }, options: [{ value: 1, label: '东南', children: [{ value: 2, label: '上海', children: [ { value: 3, label: '普陀' }, { value: 4, label: '黄埔' }, { value: 5, label: '徐汇' } ] }, { value: 7, label: '江苏', children: [ { value: 8, label: '南京' }, { value: 9, label: '苏州' }, { value: 10, label: '无锡' } ] }, { value: 12, label: '浙江', children: [ { value: 13, label: '杭州' }, { value: 14, label: '宁波' }, { value: 15, label: '嘉兴' } ] }] }, { value: 17, label: '西北', children: [{ value: 18, label: '陕西', children: [ { value: 19, label: '西安' }, { value: 20, label: '延安' } ] }, { value: 21, label: '新疆维吾尔自治区', children: [ { value: 22, label: '乌鲁木齐' }, { value: 23, label: '克拉玛依' } ] }] }] }; } }; </script>
效果为:
级联选择器满足,多分组多选项的多选效果的实现,于是使用级联选择器应用到项目当中。不仅实现获取到多选的选项,还可以实现选项的回显效果。根据级联选择器绑定的数据类型,进行回显。至此,多个表格中的多个字段的多选功能实现完毕。
本文来自博客园,作者:zwbsoft,转载请注明原文链接:https://www.cnblogs.com/zwbsoft/p/16016432.html
电话微信:13514280351
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析