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