vue element 三级联动

最新推荐文章于 2023-10-25 13:54:02 发布
最新推荐文章于 2023-10-25 13:54:02 发布
阅读量457 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47579286/article/details/105939167
版权

Hbulid代码


景点列表




按风格:
<el-button @click=“fg(1)” size=“mini”>海滨风光
<el-button @click=“fg(2)” size=“mini”>名山胜水
<el-button @click=“fg(3)” size=“mini”>人文景观
<el-button @click=“fg(4)” size=“mini”>都市田园
<el-button @click=“fg(5)” size=“mini”>其他
<el-button @click=“fg(0)” size=“mini”>全部
按风格:
<el-button @click=“dj(‘AAAAA’)” size=“mini”>5A
<el-button @click=“dj(‘AAAA’)” size=“mini”>4A
<el-button @click=“dj(‘AAA’)” size=“mini”>3A
<el-button @click=“dj(‘AA’)” size=“mini”>2A
<el-button @click=“dj(‘A’)” size=“mini”>1A
<el-button @click=“dj(’’)” size=“mini”>全部 

				<div class="diqu">按地区：
					<el-button @click="dq(230)" size="mini">山西</el-button>
					<el-button @click="dq(2425)" size="mini">三亚</el-button>
					<el-button @click="dq(372)" size="mini">内蒙古</el-button>
					<el-button @click="dq(2978)" size="mini">西藏</el-button>
					<el-button @click="dq(3063)" size="mini">陕西</el-button>
					<el-button @click="dq(0)" size="mini">全部</el-button>
					
				</div>
			</el-header>
	        <el-main>
				<el-row align="middle">
					<el-col :span="6" v-for="scenic in tableData">
						 <el-card :body-style="{ padding: '0px' }">
							<el-upload class="avatar-uploader" action="http://localhost:91/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
								<img v-if="scenic.pic" :src="scenic.pic" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						    <div style="padding: 14px;">
						        <span>{{scenic.name}}</span>&nbsp;&nbsp;<span style="color: red;">{{scenic.level}}</span><br />
								<span>{{scenic.tname}}</span><br />
								<span>{{scenic.pname}}{{scenic.cname}}{{scenic.dname}}</span><br />
								<span>门票：{{scenic.ticket}}元/人</span><br />
						        <div class="bottom clearfix">
						          <el-button type="primary" size="mini" icon="el-icon-detail" @click="openDetilDialog(scenic)">详情</el-button>
						          <el-button type="info" size="mini" icon="el-icon-edit-outline" @click="openEditDialog(scenic)">修改</el-button>
						          <el-button type="danger" size="mini" icon="el-icon-remove" @click="removeScenic(scenic.id)">删除</el-button>
						        </div>
						      </div>
						    </el-card>
					</el-col>
				</el-row>
				<!-- <el-row>
					<el-col :span="24">
						 <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page="currentPage4"
						      :page-sizes="[100, 200, 300, 400]"
						      :page-size="100"
						      layout="total, sizes, prev, pager, next, jumper"
						      :total="400">
						    </el-pagination>
					</el-col>
				</el-row> -->
				<!--行-->
				<el-row>
					<el-col :span="3">
						<el-button type="success" icon="el-icon-circle-plus-outline" @click="openInsertScenicDialog">添加景点</el-button>
					</el-col>
					<el-col :span="3">
						<el-button type="danger" icon="el-icon-remove-outline" @click="removeScenics">批量删除</el-button>
					</el-col>
					<!--24  6  12  6-->
					<el-col :span="18">
						<el-pagination @current-change="handlecurrentChange" @size-change="handlesizeChange" layout="sizes,prev,pager,next,jumper,->,total"
						 :page-sizes="pageSizes" :total="total" :current-page="current" :page-size="pageSize" background></el-pagination>
					</el-col>
				</el-row>
			</el-main>
	      </el-container>
	
	
	<!-- <el-table :data="tableData" @selection-change="handleSelectionChange">
		<el-table-column type="selection"></el-table-column>
		<el-table-column prop="id" label="景点编号"></el-table-column>
		<el-table-column prop="name" label="景点名称"></el-table-column>
		<el-table-column prop="level" label="景点级别"></el-table-column>
		<el-table-column prop="tname" label="景点类型"></el-table-column>
		<el-table-column prop="ticket" label="门票"></el-table-column>
		<el-table-column prop="pname" label="省"></el-table-column>
		<el-table-column prop="cname" label="市"></el-table-column>
		<el-table-column prop="dname" label="县"></el-table-column>
		<el-table-column label="景点图片">
			<template slot-scope="scope">
				<el-avatar shape="square" :size="100" :src="scope.row.pic"></el-avatar>
			</template>
		</el-table-column>
		<el-table-column prop="introduction" label="景点描述"></el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="primary" size="mini" icon="el-icon-detail" @click="openDetilDialog(scope.row)">详情</el-button>
				<el-button type="info" size="mini" icon="el-icon-edit-outline" @click="openEditDialog(scope.row)">修改</el-button>
				<el-button type="danger" size="mini" icon="el-icon-remove" @click="removeScenic(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-row>
		<el-col :span="24">
			<el-pagination @current-change="handlecurrentChange" @size-change="handlesizeChange" layout="sizes,prev,pager,next,jumper,->,total"
			 :page-sizes="pageSizes" :total="total" :current-page="current" :page-size="pageSize" background></el-pagination>
		</el-col>
	</el-row> -->

	<!-- 添加页面 -->
	<el-dialog :visible.sync="insertDialogVisiable" title="添加景点" width="60%" center>
		<el-form :model="insertScenicForm" label-width="100px">
			<el-form-item label="景点名称">
				<el-input v-model="insertScenicForm.name" placeholder="请输入景点名称"></el-input>
			</el-form-item>
			<el-form-item label="景区等级">
				<el-select v-model="insertScenicForm.level" placeholder="请选择景区等级" clearable>
					<el-option label="A" value="A"></el-option>
					<el-option label="AA" value="AA"></el-option>
					<el-option label="AAA" value="AAA"></el-option>
					<el-option label="AAAA" value="AAAA"></el-option>
					<el-option label="AAAAA" value="AAAAA"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="景区风格">
				<el-select v-model="insertScenicForm.type" placeholder="请输入景点风格">
					<el-option label="海滨风光" value="1"></el-option>
					<el-option label="名山胜水" value="2"></el-option>
					<el-option label="人文景观" value="3"></el-option>
					<el-option label="都市田园" value="4"></el-option>
					<el-option label="其他" value="5"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属地区">
				<el-cascader :options="options" :props="props" @change="handleChange" clearable></el-cascader>
			</el-form-item>
			<el-form-item label="门票">
				<el-input v-model="insertScenicForm.ticket" placeholder="请输入门票价格"></el-input>
			</el-form-item>
			<el-form-item label="景区图片">
				<el-upload class="avatar-uploader" action="http://localhost:91/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="景区介绍">
				<el-input type="textarea" v-model="insertScenicForm.introduction" placeholder="请输入景区介绍"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="insertClient">添加</el-button>
				<el-button>重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>

	<!-- 详情页面 -->
	<el-dialog :visible.sync="detailDialogVisiable" title="景点详情" width="60%" center>
		<el-row>
			<el-col :span="4">景区名称</el-col>
			<el-col :span="20">{{detailScenicForm.name}}</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">景区等级</el-col>
			<el-col :span="20">{{detailScenicForm.level}}</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">景区风格</el-col>
			<el-col :span="20">{{detailScenicForm.tname}}</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">所属地区</el-col>
			<el-col :span="20">{{detailScenicForm.pname}}{{detailScenicForm.cname}}{{detailScenicForm.dname}}</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">门票</el-col>
			<el-col :span="20">{{detailScenicForm.ticket}}</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">景区图片</el-col>
			<el-col :span="20">
				<el-upload class="avatar-uploader" action="http://localhost:91/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4">景区介绍</el-col>
			<el-col :span="20">{{detailScenicForm.introduction}}</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-button type="primary" size="mini" @click="detailDialogVisiable=false">返回</el-button>
			</el-col>
		</el-row>
	</el-dialog>

	<!-- 修改页面 -->
	<el-dialog :visible.sync="editDialogVisiable" title="更新景点" width="60%" center>
		<el-form :model="editScenicForm" label-width="100px">
			<el-form-item label="景点名称">
				<el-input v-model="editScenicForm.name" placeholder="请输入景点名称"></el-input>
			</el-form-item>
			<el-form-item label="景区等级">
				<el-select v-model="editScenicForm.level" placeholder="请选择景区等级" clearable>
					<el-option label="A" value="A"></el-option>
					<el-option label="AA" value="AA"></el-option>
					<el-option label="AAA" value="AAA"></el-option>
					<el-option label="AAAA" value="AAAA"></el-option>
					<el-option label="AAAAA" value="AAAAA"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="景区风格">
				<el-select v-model="editScenicForm.tname" placeholder="请输入景点风格">
					<el-option label="海滨风光" value="1"></el-option>
					<el-option label="名山胜水" value="2"></el-option>
					<el-option label="人文景观" value="3"></el-option>
					<el-option label="都市田园" value="4"></el-option>
					<el-option label="其他" value="5"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="所属地区">
				<el-cascader v-model="values" :options="options" :props="props" @change="handleChange" clearable></el-cascader>
			</el-form-item>
			<el-form-item label="门票">
				<el-input v-model="editScenicForm.ticket" placeholder="请输入门票价格"></el-input>
			</el-form-item>
			<el-form-item label="景区图片">
				<el-upload class="avatar-uploader" action="http://localhost:91/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="景区介绍">
				<el-input type="textarea" v-model="editScenicForm.introduction" placeholder="请输入景区介绍"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="editClient">更新</el-button>
				<el-button>重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</div>

idea代码
@RestController
@RequestMapping("/scenic")
public class ScenicController {

@Autowired
private IScenicService iScenicService;

@RequestMapping("/list")
public ResultApi list(Page page , ScenicVo vo){
    return ResultApi.success(iScenicService.selectPageVo(page,vo));
}

@RequestMapping("/insert")
public ResultApi insert(@RequestBody Scenic scenic){
    return ResultApi.success(iScenicService.save(scenic));
}

@RequestMapping("/update")
public ResultApi update(@RequestBody Scenic scenic){
    return ResultApi.success(iScenicService.updateById(scenic));
}

@RequestMapping("/delete")
public ResultApi delete(Integer ids[]){
    try {
        System.out.println(ids+"*******");
        iScenicService.removeByIds(Arrays.asList(ids));
        System.out.println(ids);
        return ResultApi.success(true);
    }catch (Exception e){
        e.printStackTrace();
    }
    return ResultApi.error(false);
}

}

图片上传controller
//返回的都是json类型 等效于@Controller @ResponseBody
@RestController
public class UploadController {

@RequestMapping("/upload")
private ResultApi upload(MultipartFile file){
    if(!file.isEmpty()){
        //原始文件名称
        String originalFilename = file.getOriginalFilename();
        //文件名的唯一性
        String fileName = UUID.randomUUID()+"_"+originalFilename;
        //设置上传的路劲
        File destFile = new File("D:/pic/", fileName);
        //判断目录是否存在
        if(!destFile.getParentFile().exists()){
            //则创建目录
            destFile.getParentFile().mkdir();
        }
        //保存文件
        try{
            file.transferTo(destFile);
            return ResultApi.success("http://localhost:91/img/"+fileName);
        }catch (IOException e){
            e.printStackTrace();
        }

    }
    return ResultApi.error(null);
}

}

递归获取三级联动数据
@RestController
@RequestMapping("/district")
public class DistrictController {

@Autowired
private IDistrictService iDistrictService;

@RequestMapping("/findAll")
public List<DistrictVo> findAll(){
    return iDistrictService.findAll();
}

}

三级联动需要的实体类
@Data
public class DistrictVo implements Serializable {

private static final long serialVersionUID=1L;

//记录省市县的id
private Integer id;
//映射省市县的名称
private String name;

private List<DistrictVo> list;

}

主表需要的实体类
@Data
public class ScenicVo extends Scenic {
private String pname;
private String cname;
private String dname;
private String tname;
private Integer sorted;
private Integer provinceId;
private String levelId;
private Integer typeId;
}

三级联动sql Mapper











SELECT p.id, p.province, c.id cid, c.city city, d.id did, d.district district FROM t_district p LEFT JOIN t_district c ON c.parent = p.id LEFT JOIN t_district d ON d.parent = c.id WHERE p.parent = 1

主表sql Mapper









SELECT s.*,d1.province as pname,d2.city as cname,d3.district as dname,t.`name` as tname , t.sorted as sorted FROM t_scenic s LEFT JOIN t_district d1 ON (s.province=d1.id) LEFT JOIN t_district d2 ON (s.city=d2.id) LEFT JOIN t_district d3 ON (s.county=d3.id) LEFT JOIN t_type t ON (s.type=t.id) and s.level = #{vo.levelId} and s.type = #{vo.typeId} and s.province = #{vo.provinceId}
m0_47579286
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element实现三级联动
weixin_45854365的博客
04-26 492
1.MyWebMvcConfigurer @Configuration public class MyWebMvcConfigurer implements WebMvcConfigurer { //静态资源拦截 @Override public void addResourceHandlers(ResourceHandlerRegistry registry)...
vue三级联动
skxdwy的博客
04-25 966
vue 3级联动 官方网址 1.V - Distpicker官网点击即可访问 2.element-ui的三级联动使用 安装命令 npm install v-distpicker --save 引入 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker) 代码组件 <template> <el-card> <v-distpicker :placeholders
Element Plus 的 el-icon 到底怎么用？
weixin_39415598的博客
06-24 5263
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 本文简介 点赞 + 关注 + 收藏 = 学会了 在 Vue 生态里， Element UI 是排名前列的组件库。 在 Vue 发布到 3.0 时，Element 也发布了对应的组件库。也就是 Element Plus 。随之而来的用法也跟着变了。 比如本文要讲的 el-icon 的用法。 在 Element Plus 里，Icon 图标 的用法和以前不一样了。虽然官方文档也有说明怎么用，但不是非常详细，可能
Element-ui组ICON图标
qq_15571919的博客
03-06 7493
Element-ui组ICON图标 一、基本用法 Element 内置丰富的图标库 主要有以下两种方法 设置类名 el-icon-xxx 通常使用i 元素 在Element部分组件中设置icon属性 二、页面效果 三、内置图标：以下为Element2.8.2版本提供的所有图标 ...
Vue中实现图标选择器
05-30 5574
可选择elementUI中所有的图标和自定义导入的svg图标 效果图： 首先要有这一节的基础：https://blog.csdn.net/qq_40323256/article/details/116950679 项目gitee代码：https://gitee.com/LiDaJiang/git_vue2_koa2_mongoose_iconpicker 核心代码如下所示： @/components/IconPicker/eIcon.vue: <template> &..
Element el-icon 图标组件详解
热门推荐
程序员大阳
01-27 5万+
1. 背景 使用图标可以使我们的系统界面更加的炫酷美妙，Element也提供了一些常用的图标可以直接拿来使用。 2. 使用方式 第1种方式通过class样式使用，如下即显示了一个搜索图标。注意图标是以el-icon-开头的，后面的单词表示图标的含义。 <i class="el-icon-search"></i> 此时同样可以将图标放入按钮中。 <el-button type="primary"><i class="el-icon-search">&
Element UI极简教程(2)：Icon、Button、Link组件的使用
ningnan9801的博客
12-15 6562
Java大联盟 致力于最高效的Java学习关注B 站搜索：楠哥教你学Java获取更多优质视频教程Icon 图标Element UI 的 Icon 组件提供了一套常用的图标集合，直接使...
省市区三级联动（Element + Vue）
01-07
column: [ { showlabel: false, label: 省, prop: province, type: 'select', props: { label: province, value: province ... cascaderItem: [city,area], //传给两个参数自身的值（province）
基于Vue+element UI 的手动创建地区json的三级联动
07-23
在本文中，我们将深入探讨如何基于Vue.js框架和Element UI库实现一个地区三级联动的功能。首先，我们需要了解Vue.js和Element UI的基本概念，以及axios在其中的作用。 Vue.js 是一个轻量级的前端JavaScript框架，它...
vue + elementUI实现省市县三级联动的方法示例
12-13
本文介绍了vue + elementUI实现省市县三级联动的方法示例，分享给大家，具体如下：   1、首先需要准备省市县json文件，网上有很多可以下载。项目中使用的city.json数据是这样的格式： [ { "value": "110000", ...
element+vue 组件 日期三级联动
04-25
element vue 时间组件封装 年月日 三级联动 选择 时间三级联动组件
使用vue elementUI设置省市县三级联动的下拉列表框
Zhou_siyue的博客
04-01 2万+
在前端项目开发中，经常会遇到省市县三级联动的下拉列表框组的问题，许多小伙伴第一次遇到这种问题的时候都会感觉无从下手，今天就给大家分享以下我的实现方法，希望能给大家在这方面的问题上提供一些帮助和解决的思路，以便今后在遇到同类问题的时候可以轻松应对，以下内容为具体的实现过程： ...
avue 联动使用
xiaosi1413的博客
06-03 3531
<template> <basic-container> <avue-crud :data="data" :option="option" v-model="form" @on-load="onLoad" ></avue-crud> </basic-container> </template> <script> const baseUrl = "htt
Avuejs教程：avue-crud省市区三级联动代码示例
学亮编程手记
10-19 484
【代码】Avuejs教程：avue-crud省市区三级联动代码示例。
AVUE做二级联查，本次需求：地市、市县做二级联动
qq_51012353的博客
04-28 1086
表结构一定要设计好, 包括：主键、编号（code-> 含义：地市、市县的唯一标识）、父类编码（在本次需求中，地市的编码即为市县的父类编码）,名称。-> /abujtkdarea/getAreaName: 根据地市得到对应的市区。：在新增和编辑时，级联会失效，数据尽管已经取到，但是二级框的数据却没有回填？-> /abujtkdarea/getCityName: 得到'地市'代码：在avue.js中添加强制刷新的代码，了解一下。
Avue搜索栏自定义二级联动
wupinlong的博客
11-14 7521
需求：在Avue搜索栏自定义省市联动框 就是这种的省市区多级联动，其实可以用avue-crud来做，但是需求不一样，这里就不多说公司的需求了，反正avue-crud不好实现公司的需求，所以我就使用自定义搜索栏来实现。 如果不了解的还是先去看看avue文档吧 下面我们就来说如何去实现这个需求 切记看注释！！ 切记看注释！！ 切记看注释！！ 1.首先使用slot插槽去添加自定义select框（注意看注释） 首先searchslot: true,（意思是开启搜索栏插槽） 然后slot对应prop去创建插槽（s
element-ui省市区三级联动：选择即改变
草巾冒小子的博客
06-03 3万+
element-ui 省市区三级联动：选择即改变 注意： 阅读本文，经验传授： vue.js 单组件引入外部或自定义的 .js文件，并调用文件内的 json数据； 灵活使用element-ui的select组件，“ 选择即改变 ” 即 (点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项)； 任意二级、三级联动的json 格式的数据包，都可以拿...
懒人福音！Vue+element-china-area-data实现省市区三级联动只需几步操作
Shids_的博客
04-20 1万+
懒人福音！Vue+element-china-area-data实现省市区三级联动只需几步操作
vue+element 地址选择器（二级联动、三级联动），无需封装组件，嘎嘎好用
最新发布
m0_63209237的博客
10-25 7100
全网最好用的vue地址选择器，简单易用
vue2 三级联动选项卡
10-09
可以使用vue2的组件库element-ui来实现三级联动选项卡。具体实现方法如下： 1. 引入element-ui组件库 ``` npm i element-ui -S ``` 2. 引入需要使用的组件 ``` import { Cascader, Tabs, TabPane } from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值