VUE 级联多选的方法,任意一级选择

本人使用vue2.13.0版本
首先说vue进行级联选择,可以选择任意一级
其样本如下
在这里插入图片描述
代码部分:

<div class="block">
  <span class="demonstration">单选选择任意一级选项</span>
  <el-cascader
    :options="options"
    :props="{ checkStrictly: true,multiple: true,emitPath:false }"
    clearable></el-cascader>
</div>
<script>
  export default {
    data() {
      return {
      	options:{[value:'xxx',children:[],lable:'xxx'
      			],}
      		}
      	}
<

以上即可,其中options中为树形结构数据,
checkStrictly:true属性表示上下级不会级联进行选择,
multiple: true属性表示开启多选,
emitPath:false 属性表示在选择节点以后,将该节点单独返回------默认为true 时,当选二级节点时,返回的是[一级节点value,二级节点value]
这里将其设置为false时,则当选择二级或者其他等级的节点时,只返回当前节点值,而不是返回数组

Vue.js结合Element UI中,实现el-table级别的级联功能通常需要以下几个步骤: 1. **安装依赖**: 首先确保已经安装了Vue、Element UI以及相关的库,如axios用于数据请求。 ```bash npm install vue element-ui axios ``` 2. **组件结构**: 设计一个Vue组件,包含一个`el-table`,并配置级联选择的数据源和事件处理函数。 ```html <template> <div> <el-form> <el-table :data="treeData" ref="table" v-loading="loading"> <!-- 表格列配置 --> <el-table-column type="selection" width="55"></el-table-column> <!-- ...其他列... --> <el-table-column label="操作"> <template slot-scope="{ row }"> <el-button @click="handleCascadeSelect(row)">选择</el-button> </template> </el-table-column> </el-table> </el-form> </div> </template> <script> export default { data() { return { treeData: [], // 级联数据数组 loading: false, selectedRows: [] // 保存当前被中的行 }; }, methods: { handleCascadeSelect(row) { if (this.selectedRows.includes(row)) { this.selectedRows.splice(this.selectedRows.indexOf(row), 1); } else { this.selectedRows.push(row); } // 更新表格状态,例如通过API同步到服务器 this.$axios.post('/api/cascade-select', { ids: this.selectedRows.map(r => r.id) }); }, // 加载数据(假设从后台获取) fetchData() { this.loading = true; this.$axios.get('/api/tree-data').then(response => { this.treeData = response.data; this.loading = false; }); } }, created() { this.fetchData(); } }; </script> ``` 3. **数据绑定**: `treeData`应该是一个嵌套的对象数组,每个元素表示一级菜单,包含标识符和下拉项。 4. **生命周期钩子**: 使用`created`生命周期钩子加载初始数据,`fetchData`函数可以替换为你实际的数据获取方法。 **注意事项**: - 确保在表格渲染之前数据已准备就绪。 - 如果有层级关系,你可以添加递归或懒加载机制来处理复杂的树形结构。 - `handleCascadeSelect`方法可以根据需求调整,比如发送异步请求更新数据库等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

灵湖映北辰

年轻人,要讲武德!!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值