ElementUI 添加查询删除及三级地址联动例程

àì夳堔傛蜴生んèń 2021-10-23 21:48 313阅读 0赞

## 1、使用Vue Cli创建VUE项目 ##

vue create myvue

## 2、添加vue-router,element-ui,axios类库 ##

npm install vue-router  
npm install element-ui  
npm install axios

## 3、添加list.vue列表页面 ##

<template>
    <div>
    
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="query.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="query.age1"></el-input>
        </el-form-item>
        <el-form-item label="至">
          <el-input v-model="query.age2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doquery">查询</el-button>
          <el-button type="primary" @click="doadd">添加</el-button>
          <el-button type="primary" @click="dodelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    
      <el-table
        :data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
        style="width: 100%"
        max-height="550" @selection-change="handleSelectionChange">
        <el-table-column
          prop="id"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="provinceName"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="cityName"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="countyName"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="120">
        </el-table-column>
        <el-table-column
          prop="dt"
          label="日期"
          width="150">
        </el-table-column>
        <el-table-column
          prop="ts"
          label="时间"
          width="150">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click="doedit(scope.$index, tableData)"
              type="text"
              size="small">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes=[4,8,16,32]
        :page-size="pagesize"
        :current-page="currentpage"
        :total="tableData.length">
      </el-pagination>
    </div>
    </template>
    
    <script>
      import axios from 'axios'
    
      export default {
        methods: {
          doedit(index, rows) {
            var id = rows[index].id;
            this.$router.push('/add/'+id);
          },
          handleSelectionChange(sels) {
            this.chkid=[];
            if(sels.length>0)
            {
              for(var i=0;i<sels.length;i++)
                this.chkid.push(sels[i].id);
            }
          },
          loadstudent(){
            var _this = this;
            axios.post('http://localhost:6060/findstud',_this.query)
              .then(function(resp){
                console.log(resp.data);
                _this.tableData=resp.data.list;
              })
          },
    			dodelete:function()
    			{
    				var _this = this;
    				axios.post('http://localhost:6060/deletestud?ids='+_this.chkid)
    					.then(function(result){
    						if(result.data)
    						{
    							alert("Delete Successfully");
    							//重新装载列表
    							_this.loadstudent();
    						}
    					})
    			},
          doadd:function()
          {
            this.$router.push('/add');
          },
          doquery:function()
          {
            this.loadstudent();
          },
          // 初始页currentPage、初始每页数据数pagesize和数据data
          handleSizeChange: function (size) {
                  this.pagesize = size;
                  console.log(this.pagesize)  //每页下拉显示数据
          },
          handleCurrentChange: function(currentpage){
                  this.currentpage = currentpage;
                  console.log(this.currentpage)  //点击第几页
          }
    
        },
        mounted:function(){
          this.loadstudent();
        },
        data() {
          return {
            pagesize:4,
            currentpage:1,
            tableData: [],
            chkid:[],
            query:{
              name:'',
              age1:'',
              age2:''
            }
          }
        }
      }
    </script>

## 4、添加页面add.vue ##

<template>
        
    
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="student.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="student.age"></el-input>
      </el-form-item>
      <el-form-item label="日期">
        <el-col :span="11">
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="student.dt" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="11">
          <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="student.ts" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="省份">
        <el-select v-model="student.province" placeholder="请选择省份" @change="selectprovince" style="width: 100%;">
          <el-option v-for="p in provincelist" :label="p.name" :value="p.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区">
        <el-select v-model="student.city" placeholder="请选择地区" @change="selectcity" style="width: 100%;">
          <el-option v-for="c in citylist" 
            :label="c.name"
            :value="c.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="县市">
        <el-select v-model="student.county" placeholder="请选择县市" style="width: 100%;">
          <el-option v-for="c in countylist" 
            :label="c.name"
            :value="c.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    
    </template>
    
    <script>
      import axios from 'axios'
    
      export default {
        data() {
          return {
    
                provincelist:[],//所有省份集合
                citylist:[],//选中省份之后对应地区集合
                countylist:[],//选中地区之后对应县市集合
     			student:{//添加或修改时用到的学生对象
    				id:'',//学生ID
    				name:'',//学生姓名
    				age:'12',//学生年龄
    				province:'',//省份代码
    				city:'',//地区代码
    				county:'',//县市代码
    				dt:'',//日期
    				ts:''//时间
    			}
          }
        },
        mounted() {
            var id = this.$route.params.id;
            this.openbyid(id);
            this.doloadaddress();
        },
        methods: {
          onSubmit() {
            console.log('submit!');
            this.dosave();
          },
            //通过学生ID，获取学生对象
            openbyid:function(id)
            {
                var _this = this;
                axios.get('http://localhost:6060/findstudbyid?id='+id)
                .then(function(result){
                    _this.student=result.data;
                    //调用VUE方法，初始化三级联动地址
                    _this.doloadaddress(_this.student.province,_this.student.city,
                            _this.student.county);
                })
            },
            dosave:function()
            {
                console.log('dosave...');
                var _this = this;
                //将VUE对象student提交到后台
                axios.post('http://localhost:6060/savestudent',_this.student)
                    .then(function(result){
                        if(result.data)
                        {
                            alert('Successfully');
                            _this.$router.push('/list');
                        }
                        else
                            alert('Failure');
                    })
            },
            selectprovince:function()//省份下列框选择事件
            {
                //选择地区，只输入省份Code
                this.doloadaddress(this.student.province);
            },
            selectcity:function()//地区下列框选择事件
            {
                //选择县市，输入省份Code，地区Code
                this.doloadaddress(this.student.province,this.student.city);
            },
            //初始化三级联动地址下列框
            //province 省份代码  可空
            //city 地区代码  可空
            //county 县市代码 可空
            doloadaddress:function(province,city,county)
            {
                console.log('doloadaddress...');
                //定义_this记录VUE实例，应用axios中this代表
                var _this = this;
                //加载省份列表
                axios.get('http://localhost:6060/getprovice')
                    .then(function(result){
                        _this.provincelist = result.data;
                        if(province != '' && province != null)
                        {
                            console.log('province...'+province);
                            _this.student.province = province;
                        }
                        else
                        {
                            //如果没有省份初始值，选择第一省份作为初始值
                            _this.student.province = result.data[0].code;
                        }
                        //根据省份Code，加载地区列表，发起请求，在下面语句中捕捉返回数据
                        return axios.get('http://localhost:6060/getcity?code='+_this.student.province);
                    })
                    .then(function(cityResult){
                        //捕捉地区列表数据
                        _this.citylist = cityResult.data;
                        if(city != '' && city != null)
                        {
                            console.log('city...'+city);
                            _this.student.city = city;
                        }
                        else
                        {
                            //如果没有地区初始值，选择第一地区作为初始值
                            _this.student.city = cityResult.data[0].code;
                        }
                        //根据地区Code，加载县市列表，发起请求，在下面语句中捕捉返回数据
                        return axios.get('http://localhost:6060/getcounty?code='+_this.student.city);
                    })
                    .then(function(countyResult){
                        //捕捉县市列表数据
                        _this.countylist = countyResult.data;
                        console.log('county...'+countyResult.data);
                        if(county != '' && county != null)
                        {
                            console.log('county...'+county);
                            _this.student.county = county;
                        }
                        else
                        {
                            //如果没有县市初始值，选择第一县市作为初始值
                            _this.student.county = countyResult.data[0].code;
                        }
                    })
            }
        }
      }
    </script>

## 5、添加路由JS ##

import List from '@/components/list.vue'
    import Add from '@/components/add.vue'
    
    export default{
        routes:[
            {path:"/list",component:List},
            {path:"/add",component:Add},
            {path:"/add/:id",component:Add}
        ]
    
    }

## 6、修改main.js,引入所需JS ##

import Vue from 'vue'
    import App from './App.vue'
    
    import axios from 'axios'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';
    
    import VueRouter from 'vue-router'
    import myrouter from './myrouter'
    
    Vue.config.productionTip = false
    
    Vue.use(ElementUI)
    Vue.use(VueRouter)
    
    const router = new VueRouter(myrouter);
    
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app')

## 7、修改App.vue首页面 ##

<template>
      <div id="app">
        <router-link to="/add">添加</router-link>
        <router-link to="/list">列表</router-link>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    import StudentList from './components/list.vue'
    
    export default {
      name: 'app',
      components: {
        StudentList
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]

SpringBoot后台代码  
https://pan.baidu.com/s/1ccsIhEs\_TY8qQbP\_Mt5Rkg 提取码t2bi

前端VUE项目

https://pan.baidu.com/s/10NMyDAgu5Gceg2iRsE0TKw 提取码vrx4

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: /images/20211023/06c15f97406d47d8ad24cbb4df4083a9.png