在长沙做JAVA开发,怎一个惨字了得!

我是女孩子,一年到头经常加班,现在4个年头了,对未来的生活担忧啊!
实现这个功能可以通过以下步骤: 1. 在 table 中定义一个多选列,并在该列中使用 `el-select` 组件来显示下拉框。 2. 在 `el-select` 组件中使用 `v-model` 绑定一个数组,用于存储被选中的选项。 3. 在 `el-select` 组件中使用 `filterable` 属性开启搜索功能,让用户可以快速找到需要的选项。 4. 在 `el-select` 组件中使用 `filter-method` 属性定义一个自定义的过滤函数,用于根据条件筛选选项列表。 5. 在 `el-select` 组件中使用 `before-dropdown-toggle` 事件,当下拉框被展开或收起时触发该事件,可以在该事件中动态更新选项列表。 6. 在 `el-table-column` 组件中定义一个删除按钮,并使用 `scope` 属性传递当前行的数据对象。 7. 在删除按钮的点击事件中,从被选中的选项数组中移除当前行的数据对象。 8. 在 `before-dropdown-toggle` 事件中检查当前行的数据对象是否在被选中的选项数组中,如果存在,则从选项列表中排除该选项,使其不能再次被选中。 下面是一个示例代码实现: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="爱好"> <template slot-scope="scope"> <el-select v-model="scope.row.hobbies" multiple filterable :filter-method="filterHobbies" @before-dropdown-toggle="updateHobbiesOptionList"> <el-option v-for="option in hobbiesOptionList" :key="option" :label="option" :value="option" :disabled="disabledHobbiesOptionList.includes(option)"> </el-option> </el-select> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="danger" icon="el-icon-delete" @click="removeTableRow(scope.row)"> 删除 </el-button> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, hobbies: ['游泳', '读书'] }, { name: '李四', age: 20, hobbies: ['唱歌', '跳舞'] }, { name: '王五', age: 22, hobbies: ['旅游', '电影'] } ], hobbiesOptionList: ['游泳', '读书', '唱歌', '跳舞', '旅游', '电影'], disabledHobbiesOptionList: [] } }, methods: { filterHobbies(value, option) { return option.toLowerCase().indexOf(value.toLowerCase()) !== -1 }, updateHobbiesOptionList(visible) { if (visible) { this.disabledHobbiesOptionList = [] this.tableData.forEach(row => { row.hobbies.forEach(hobby => { if (!this.disabledHobbiesOptionList.includes(hobby)) { this.disabledHobbiesOptionList.push(hobby) } }) }) } }, removeTableRow(row) { const hobbies = row.hobbies const index = hobbies.findIndex(item => item === row) if (index !== -1) { hobbies.splice(index, 1) } } } } </script> ``` 在上面的代码中,我们使用 `el-select` 组件来实现下拉框,并使用 `v-model` 绑定一个数组 `row.hobbies`,用于存储选中的选项。我们使用 `filterable` 属性开启搜索功能,并使用 `filter-method` 属性定义一个自定义的过滤函数。在 `before-dropdown-toggle` 事件中,我们使用 `updateHobbiesOptionList` 方法来动态更新选项列表,并使用 `disabledHobbiesOptionList` 数组来存储不能再次被选中的选项。在删除按钮的点击事件中,我们使用 `removeTableRow` 方法从选项数组中移除当前行的数据对象。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值