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

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>

SpringBoot后台代码
https://pan.baidu.com/s/1ccsIhEs_TY8qQbP_Mt5Rkg 提取码t2bi

前端VUE项目

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