<template>
<div>
<h2>测试页面</h2>
<div>
<!-- 表格 -->
<el-table :data="tableData" style="width: 800px">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column align="right">
<template slot-scope="scope">
<el-button
class="bianji"
type="success"
size="mini"
@click="editMsg(scope.row)"
><i class="el-icon-edit-outline btn"></i>处理 / 详情</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 弹窗 -->
<el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
<el-descriptions title="用户信息" border>
<el-descriptions-item label="日期">{{
diaDate.date
}}</el-descriptions-item>
<el-descriptions-item label="姓名">{{
diaDate.name
}}</el-descriptions-item>
<el-descriptions-item label="地址">{{
diaDate.address
}}</el-descriptions-item>
</el-descriptions>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "洛丹伦",
},
{
date: "2016-05-04",
name: "狗儿但",
address: "黑色玫瑰",
},
{
date: "2016-05-01",
name: "飞机头",
address: "海澜之家",
},
],
dialogVisible: false,
diaDate: {
date: "",
name: "",
address: "",
},
};
},
methods: {
editMsg(row) {
this.dialogVisible = true;
console.log(row);
this.diaDate.date = row.date;
this.diaDate.name = row.name;
this.diaDate.address = row.address;
},
},
};
</script>