ElementUi中的Dialog对话框——弹出窗口与新增更新功能为例

<!--
弹出窗口：增加和修改书本信息共用一个弹出窗口，需要根据用户的选择动态的设置弹出窗口的标题
:tile  通过绑定值的方式设置dialog的标题
:visible.sync  控制弹出窗口的显示或隐藏，.sync同步修饰符
@close="closeBookForm"，设置窗口关闭时调用的处理函数，可用于清空表单
:model="bookForm"：用于定义表单对应的model，具体model的定义可见data部分。
v-show="optiontype == 'update'" 通过操作类型控制是否显示书本编号字段，如果当前操作类型为
       新增，则不用显示，书本编号在数据表中是自增的。
:label-width="formLabelWidth" 统一定义标签的宽度。
:style="{width: formEleWidth}"  统一定义form元素的宽度。
-->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
  <el-form :model="bookForm">
    <el-form-item v-show="optiontype == 'update'" label="编号" :label-width="formLabelWidth">
      <el-input v-model="bookForm.id" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    </el-form-item>
    <el-form-item label="书名" :label-width="formLabelWidth">
      <el-input v-model="bookForm.bookname" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    </el-form-item>
    <el-form-item label="价格" :label-width="formLabelWidth">
      <el-input v-model="bookForm.price" autocomplete="off" :style="{width: formEleWidth}"></el-input>
    </el-form-item>
    <el-form-item label="类型" :label-width="formLabelWidth">
      <el-select v-model="bookForm.booktype" placeholder="选择类型" :style="{width:formEleWidth}">
        <el-option label="名著" value="mz"></el-option>
        <el-option label="小说" value="xs"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

    <!--表格-->
    <el-table :data="books" style="width: 100%;" :border="true" max-height="530">
      <el-table-column prop="id" label="编号" min-width="40" align="center"></el-table-column>
      <el-table-column prop="bookname" label="名称" min-width="100" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" min-width="70" align="center"></el-table-column>
      <el-table-column prop="booktype" label="类型" min-width="70" align="center"></el-table-column>
      <!-- “编辑”“删除”功能连接 -->
      <el-table-column label="操作">
        <!--
        在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop
        slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取
        row对象信息和行索引index信息即可
        -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

export default {
name: 'BookList',

data: function() {
  return {
    bookname: '',
    books: [],
    total: 0,
    rows: 10,
    page: 1,

    //控制对话框是否显示，默认是隐藏状态
    dialogFormVisible: false,

    //统一控制标签的宽度
    formLabelWidth: '40px',

    //统一控制表单元素的宽度
    formEleWidth: '400px',

    //对话框标题，默认为新增，如果是点击修改按钮打开对话框，则标题应为修改。
    dialogName:'新增书本',

    //操作类型，默认为添加，如果是点击修改打开对话框，则操作类类型应变为修改
    //该变量用于控制是否显示书本编号字段，当操作类型为新增时不需显示（书本编号数据表字段为自增）
    //当操作类型为修改时，需要显示。
    optiontype: 'add',

    //定义表单对应的model
    bookForm: {
      id: '',
      bookname: '',
      price:null,
      booktype: ''
    }
  }
},

methods: {
  qry: function() {
    let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
    this.axios.post(url, {
      bookname: this.bookname,
      page: this.page,
      rows: this.rows
    }).then(resp => {
      console.log(resp);
      this.books = resp.data.data;
      this.total = resp.data.total;
    }).catch(error => {
      console.log(error);
    });
  },

  //当每页显示的记录数发生变化时，设置当前页码为1，执行查询。
  handleSizeChange: function(rows) {
    this.rows = rows;
    this.page = 1;
    this.qry();
  },

  //当前页码发生变化时，执行查询
  handleCurrentChange: function(page) {
    this.page = page;
    this.qry();
  },

  //当关闭对话框时，该方法用于清空表单
  closeBookForm: function() {
    this.bookForm.id=null;
    this.bookForm.bookname = null;
    this.bookForm.booktype = null;
    this.bookForm.price = null;
  },

  //打开对话框，将对话框标题设置为新增，操作类型设置为'add'
  addBook: function() {
    this.dialogName = '新增书本信息';
    this.dialogFormVisible = true;
    this.optiontype = 'add';
  },

  //打开对话框，将对话框标题设置为修改，操作类型设置为'update'，
  //并使用获取的待修改的记录的值设置对应的表单元素
  handleEdit: function(row) {
    this.dialogName = '编辑书本信息';
    this.dialogFormVisible = true;
    this.bookForm.id=row.id;
    this.bookForm.bookname = row.bookname;
    this.bookForm.booktype = row.booktype;
    this.bookForm.price = row.price;
    this.optiontype = 'update';
  },

  //删除书本记录
  handleDelete: function(row) {
    console.log("dele  = " + row);
  }

}
}