vue+element下拉框实现二级联动

参考文章：https://blog.csdn.net/qq_42341025/article/details/86601093

<el-form-item label-width="80px" label="商品信息:" prop="numIids"><el-selectv-model="goodsCircle.favoritesId"@change="selectExitSelectConfig"filterableremoteplaceholder="请选择现有选品库"><el-optionv-for="item in favorites":key="item.key":label="item.label":value="item.key"/></el-select><span>-</span><el-selectv-model="goodsCircle.numIids"@change="selectLocalSelectConfig"filterableremotemultipleplaceholder="请选择本地商品库"style="width:60%"><el-optionv-for="item in localFavorites":key="item.key":label="item.label":value="item.key"/></el-select></el-form-item>

1.页面一加载就开始获取现有商品信息（及一级菜单），然后得到的数组重新整合赋给favorites
2.

<script>
export default {data() {return {goodsCircle: {title: "",authorInfo: {},author: "",authorImg: "",content: "",favoritesId: null,numIids: []},favorites: [],localFavorites: [],listQuery: {liilType: 2, //1,为系统基础配置,不可调节;2暂定为朋友圈选品库,不传查询全部enableStatus: 1, //：启用状态（默认查询启用）；-1废弃authorStatus: 1 //1,有效的发布者},};},methods: {//改变value值，实现 联动， 给下拉框绑定change事件selectExitSelectConfig(val) {this.localFavorites = [];this.goodsCircle.numIids = null,this.getLocalSelectConfig();},selectLocalSelectConfig(val) {console.log(val);},getExitSelectConfig() {this.$api.operation.getExitSelectConfig({liilType: 2,status: this.listQuery.enableStatus}).then(res => {if (res.data.code == 200) {let arr = [];res.data.result.forEach((res, index) => {arr[index] = {key: res.favoritesId,label: res.favoritesTitle};});this.favorites = arr;this.getLocalSelectConfig();}});},getLocalSelectConfig() {this.$api.operation.getLocalSelectConfig({favoritesId: this.goodsCircle.favoritesId}).then(res => {if (res.data.code == 200) {let arr = [];res.data.result.forEach((res, index) => {arr[index] = {key: res.numIid,label: res.title};});this.localFavorites = arr;}});},},computed: {contentShortLength() {return this.goodsCircle.content.length;}},mounted() {this.getExitSelectConfig();},watch: {favorites: {handler(newValue, oldValue) {},deep: true},localFavorites: {handler(newValue, oldValue) {},deep: true}},created() {this.getExitSelectConfig();}
};
</script>

------------------------------------------------------------华丽分割线---------------------------------------------------------
后因业务需求，所以做了改善

<el-selectv-model="goodsCircle.favoritesId"@change="selectExitSelectConfig"filterableremoteplaceholder="请选择现有选品库"><el-optionv-for="item in favorites":key="item.key":label="item.label":value="item.key"/></el-select><el-checkbox:indeterminate="isIndeterminate"v-model="checkAll"@change="handleCheckAllChange">全选</el-checkbox><el-checkbox-groupclass="el-row"v-model="checkedNumIids"@change="handleCheckedCitiesChange"><el-checkboxclass="local-el-checkbox el-col el-col-6"v-for="item in localFavorites":value="item.key":label="item.key"        ><el-card class :body-style="{ padding: '0px',lineHeight:'2'}" style="margin:20px auto"><!-- <span class="gou" :class="{on:imgChecked}" v-if="imgChecked"></span> --><img :src="item.pictUrl" class="image" /><div style="padding: 14px;"><p class="hide-moreCon">{{item.title}}</p><p>优惠券数量：<em style="color:#f40">{{item.couponRemainCount}}</em>/ {{item.couponTotalCount}}</p><div class="bottom clearfix"><timeclass="time">优惠券有效时间：{{formatDate(item.couponStartTime)}}至{{formatDate(item.couponEndTime)}}</time></div></div></el-card></el-checkbox></el-checkbox-group>

this.checkAll = checkedCount === this.localFavorites.length;这里一定要和原数组作比较

<script>
export default {methods: {// 选择本地商品库handleCheckAllChange(val) {// this.checkedCities = val ? this.localFavorites : [];const temp = [];this.localFavorites.forEach((res, index) => {console.log(res);temp[index] = val ? res.key : [];});this.checkedNumIids = temp;this.isIndeterminate = false;},handleCheckedCitiesChange(value) {console.log(value);let checkedCount = value.length;this.checkAll = checkedCount === this.localFavorites.length;this.isIndeterminate =checkedCount > 0 && checkedCount < this.localFavorites.length;},selectExitSelectConfig(val) {this.localFavorites = [];(this.goodsCircle.numIids = null), this.getLocalSelectConfig(val);},getExitSelectConfig() {this.$api.operation.getExitSelectConfig({liilType: 2,status: this.listQuery.enableStatus}).then(res => {if (res.data.code == 200) {let arr = [];res.data.result.forEach((res, index) => {arr[index] = {key: res.favoritesId,label: res.favoritesTitle};});this.favorites = arr;this.getLocalSelectConfig();}});},getLocalSelectConfig(favoritesId) {this.$api.operation.getLocalSelectConfig({favoritesId: this.goodsCircle.favoritesId}).then(res => {if (res.data.code == 200) {let arr = [];res.data.result.forEach((res, index) => {arr[index] = {key: res.numIid,title: res.title,};});this.localFavorites = arr;}});},},computed: {contentShortLength() {return this.goodsCircle.content.length;}},mounted() {this.getExitSelectConfig();},watch: {favorites: {handler(newValue, oldValue) {},deep: true},localFavorites: {handler(newValue, oldValue) {},deep: true}},created() {this.getExitSelectConfig();}
};

vue+element下拉框实现二级联动相关推荐

php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
二级联动（两个下拉框的二级联动，和单选按钮与下拉框的二级联动）
1,两个下拉框的二级联动代码: <!DOCTYPE html><html lang="en"><head><meta charset=& ...
下拉框的二级联动和回显
二级联动和回显效果如下: 二级联动我们首先要查询出年级表的内容,在年级表的控制层中; Controller /*** 查询nj表的内容 @RequestMapping("/spr/nj& ...
HTML下拉框、二级联动 select多级联动
html + ajax +php 二级联动下拉框 <!DOCTYPE html> <html> <head> </head> <style> ...
Vue element 下拉框可输入可选择(无bug)
背景: 需要一个可填可选的下拉框当用户自定义输入时,自动添加"(其他)"后缀效果如下: <el-select v-model="value"place ...
vue element 下拉框内容过长显示...鼠标悬浮显示全部
1.1. css 多选下拉框内容过长-用...代替 /*下拉选择框-多选-内容过长-用...代替 begin */ .el-tag.el-tag--info {background-color: ...
layui框架----下拉框的二级联动
一.layui.use 这里layui的官方文档:https://www.layui.com/doc/ layui这个框架采用的是经典模块化 layui的内置模块不是默认就加载好的,必须要执行启动模块 ...
Vue.js下拉框-详细省市联动示例
1.引入必要JS文件,以下截图是js文件截图. 2.把HTML写好,我这样式是比较丑的,不要在意这些细节. 1 <body> 2 3 <div id="divContent ...

vue+element下拉框实现二级联动

vue+element下拉框实现二级联动相关推荐

最新文章

热门文章