<template> <div> <el-row> <el-col :span="2"> <div class="grid-content bg-purple"> <el-input v-model="user.name" placeholder="请输入 姓名"></el-input> </div> </el-col> <el-col :span="4"> <div class="grid-content bg-purple-light"> <el-radio v-model="user.car" label="奔驰">奔驰</el-radio> <el-radio v-model="user.car" label="宝马">宝马</el-radio> </div> </el-col> <el-col :span="6"> <div class="grid-content bg-purple"> <el-checkbox-group v-model="user.checkList"> <el-checkbox label="高速"></el-checkbox> <el-checkbox label="国道"></el-checkbox> <el-checkbox label="省道"></el-checkbox> </el-checkbox-group> </div> </el-col> <el-col :span="4"> <div class="grid-content bg-purple-light"> <el-select v-model="user.pinks" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" > </el-option> </el-select> </div> </el-col> <el-col :span="4"> <el-date-picker v-model="user.datas" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" > placeholder="选择日期"> </el-date-picker> </el-col> <el-col :span="4"> <el-button type="primary" @click="adduser">立即创建</el-button> </el-col> <el-table :data="tableData" style="width: 100%; margin-top: 2rem"> <el-table-column type="index" label="序号" width="180"> <template slot-scope="scope"> {{ scope.$index }} </template> </el-table-column> <el-table-column prop="name" sortable label="姓名" width="180"> </el-table-column> <el-table-column prop="car" label="汽车" width="180"> </el-table-column> <el-table-column prop="checkList" label="路线" width="180"> </el-table-column> <el-table-column prop="pinks" label="食品" width="180"> </el-table-column> <el-table-column prop="datas" label="时间" sortable> </el-table-column> <el-table-column fixed="right" label="操作"> <template slot-scope="scope"> <!-- <el-button @click="deletes(scope.row)" type="text" size="small"> <el-button type="danger" icon="el-icon-delete" circle></el-button></el-button> --> <el-button @click="xiugai(scope.row, scope.$index)" type="text" size="small" > <el-button type="primary" icon="el-icon-edit" circle></el-button ></el-button> <el-button @click="deletes(scope.$index)" type="text" size="small"> <el-button type="danger" icon="el-icon-delete" circle></el-button ></el-button> </template> </el-table-column> </el-table> </el-row> <!-- 弹窗 --> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" > <!-- kaishi --> <el-col :span="24"> <div class="grid-content bg-purple"> <el-input v-model="userList.name" placeholder="请输入 姓名" ></el-input> </div> </el-col> <el-col :span="24"> <div class="grid-content bg-purple-light"> <el-radio v-model="userList.car" label="奔驰">奔驰</el-radio> <el-radio v-model="userList.car" label="宝马">宝马</el-radio> </div> </el-col> <el-col :span="24"> <div class="grid-content bg-purple"> <el-checkbox-group v-model="userList.checkList"> <el-checkbox label="高速"></el-checkbox> <el-checkbox label="国道"></el-checkbox> <el-checkbox label="省道"></el-checkbox> </el-checkbox-group> </div> </el-col> <el-col :span="24"> <div class="grid-content bg-purple-light"> <el-select v-model="userList.pinks" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label" > </el-option> </el-select> </div> </el-col> <el-col :span="24"> <el-date-picker v-model="userList.datas" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" > placeholder="选择日期"> </el-date-picker> </el-col> <!-- jieshu --> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="queding()">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { name: "ListTable", data() { return { cunindex: "", dialogVisible: false, user: { name: "", car: "1", checkList: [], pinks: "", datas: "", }, userList: {}, options: [ { value: "选项1", label: "黄金糕", }, { value: "选项2", label: "双皮奶", }, { value: "选项3", label: "蚵仔煎", }, { value: "选项4", label: "龙须面", }, { value: "选项5", label: "北京烤鸭", }, ], tableData: [{}], }; }, mounted() { console.log(this.tableData); this.tableData = []; }, methods: { adduser() { if (!this.user.name) { this.$message({ message: "请输入姓名", type: "warning", }); return; } this.tableData.push(this.user); (this.user = { name: "", car: "", checkList: [], pinks: "", datas: "", }), // this.$set(this.tableData,1,this.user) console.log(this.tableData); }, deletes(idx) { console.log(idx); this.tableData.splice(idx, 1); }, xiugai(item, idx) { console.log(item); this.cunindex = idx; this.dialogVisible = true; this.userList = { name: item.name, car: item.car, checkList: item.checkList, pinks: item.pinks, datas: item.datas, }; }, queding() { // alert(this.cunindex) console.log(this.userList + "xin"); console.log(this.user + "jiu"); this.dialogVisible = false; this.$set(this.tableData, this.cunindex, this.userList); // this.$set(this.someObject,'b',2) }, }, }; </script> <style scoped> .el-row { width: 80%; margin: 0 auto; border: 1px solid pink; height: 600px; padding: 1rem; } </style>