单的两表联查电影管理系统，下拉框回显

下拉框回显代码

<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>