单的两表联查电影管理系统，下拉框回显
Posted 奔跑的小峥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单的两表联查电影管理系统，下拉框回显相关的知识，希望对你有一定的参考价值。
简单的两表联查电影管理系统
下拉框回显代码
<el-form-item label="电影类型" prop="typeid">
<el-select v-model="userForm.typeid" placeholder="请选择角色姓名">
<el-option v-for="item in xialaData" :key="item.id" :label="item.typename" :value="item.id">
{{item.typename}}
</el-option>
</el-select>
</el-form-item>
下拉框的ajax请求的属性（数组）和方法
//下拉数据
xialaData: [],
//下拉列表
xiala() {
var that = this;
this.$http.get("/zz/type/list").then(function (resp) {
that.xialaData = resp.data.result;
console.log(resp)
})
},
页面代码
<template>
<div>
<!-- 卡片-->
<el-card class="box-card">
<template>
<h1> 电影管理系统 </h1>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="movieid"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="moviename"
label="电影名称"
width="180">
</el-table-column>
<el-table-column
prop="updates"
label="上映时间">
</el-table-column>
<el-table-column
prop="typename"
label="电影类别">
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.typeid==1">喜剧</span>-->
<!-- <span v-if="scope.row.typeid==2">爱情</span>-->
<!-- <span v-if="scope.row.typeid==3">都市</span>-->
<!-- </template>-->
</el-table-column>
<el-table-column
prop="movielang"
label="片长">
</el-table-column>
<el-table-column
prop="moviescore"
label="评分">
</el-table-column>
<el-table-column
prop="moviedesc"
label="简介">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="update(scope.row)">编辑</el-button>
<!-- <el-button type="primary" @click="del(scope.row.userid)">删除</el-button>-->
</template>
</el-table-column>
</el-table>
</template>
</el-card>
<!--修改弹出对话框-->
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="30%"
>
<el-form :inline="true" :model="userForm" ref="userFormref">
<el-form-item label="电影名称" prop="moviename">
<el-input v-model="userForm.moviename"></el-input>
</el-form-item>
<el-form-item label="片长" prop="movielang" >
<el-input v-model="userForm.movielang"></el-input>
</el-form-item>
<el-form-item label="评分" prop="moviescore">
<el-input v-model="userForm.moviescore"></el-input>
</el-form-item>
<el-form-item label="上映时间" prop="updates">
<el-date-picker
v-model="userForm.updates"
align="right"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item label="电影类型" prop="typeid">
<el-select v-model="userForm.typeid" placeholder="请选择角色姓名">
<el-option v-for="item in xialaData" :key="item.id" :label="item.typename" :value="item.id">
{{item.typename}}
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="insertOrUpdate()">提交
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "User",
data() {
return {
//模糊查询数据
// formDate: {},
page: 1,
//数据后台传来的
tableData: [],
//默认弹框关闭
dialogVisible: false,
title: "",
//新增修改的数据
userForm: {},
//下拉数据
xialaData: [],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
}
}
},
//页面初始化加载用户信息
created() {
this.selectAll();
this.xiala();
},
methods: {
//查询的user结果
selectAll() {
var that = this;
this.$http.post("/zz/movie/list/").then(function (resp) {
//将返回的数据赋值给tableData
that.tableData = resp.data.result;
// that.total = resp.data.result.total;
console.log(resp)
})
},
//修改的方法
update(row) {
//把当前行数据赋值给表单数据 表示深拷贝，如果直接赋值的话，就变成了浅拷贝，
// 复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，
// 所以要进行深拷贝，利用json就可以了
this.userForm = JSON.parse(JSON.stringify(row));
this.title = "电影管理系统"
this.dialogVisible = true;
},
//确认按钮
insertOrUpdate() {
var that = this;
this.$http.post("/zz/movie/insertOrUpdate", this.userForm).then(function (resp) {
if (resp.data.code === 2000) {
that.dialogVisible = false;
that.selectAll();
that.$message.success(resp.data.msg);
} else {
that.$message.error(resp.data.msg);
}
})
},
//下拉列表
xiala() {
var that = this;
this.$http.get("/zz/type/list").then(function (resp) {
that.xialaData = resp.data.result;
console.log(resp)
})
},
}
}
</script>
<style scoped>
</style>
后台的两表联查的sql
<select id="select" resultType="com.zz.zz.entity.Movie">
SELECT m.*,t.Typename from tb_movie m join tb_type t
on m.Typeid=t.id
</select>
以上是关于单的两表联查电影管理系统，下拉框回显的主要内容，如果未能解决你的问题，请参考以下文章