循序渐进VUE+Element 前端应用开发(6）— 常规Element 界面组件的使用,循序渐进VUE+Element 前端应用开发(5）— 表格列表页面的查询，列表展示和字段转义处理,循序渐进VU...

在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用，使得我们对如何利用Element组件有一个大概的认识。

1、列表界面和其他模块展示处理

在前面随笔《循序渐进VUE+Element 前端应用开发(5)— 表格列表页面的查询，列表展示和字段转义处理》介绍了基于列表展示了相关数据，并在列表界面整合了增删改查等常规的业务操作处理。

 常规的列表展示界面，一般分为几个区域，一个是查询区域，一个是列表展示区域，一个是底部的分页组件区域。查询区域主要针对常规条件进行布局，以及增加一些全局或者批量的操作，如导入、导出、添加、批量添加、批量删除等按钮；而其中主体的列表展示区域，是相对比较复杂一点的地方，需要对各项数据进行比较友好的展示，可以结合Tag,图标，按钮等界面元素来展示，其中列表一般后面会包括一些对单行记录处理的操作，如查看、编辑、删除的操作，如果是批量删除，可以放到顶部的按钮区域。

对于常规按钮、表格、分页组件，前面已经做了相关的介绍，这里就不再赘述。

在介绍具体界面组件的时候，我们先来了解下，整体的界面布局，我们把常规的列表界面，新增、编辑、查看、导入等界面放在一起，除了列表页面，其他内容以弹出层对话框的方式进行处理，如下界面示意所示。

 每个对话框的:visible的属性值，则是确定哪个模态对话框的显示和隐藏。

在Vue的JS模块里面，我们除了定义对应的对话框显示的变量外，对每个对话框，我们定义一个表单信息用来进行数据的双向绑定处理。

 常规的新增、编辑、查看、导入等内容的定义，作为一个对话框组件定义，常规的对话框组件的使用代码如下所示。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <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>

为了控制对话框的样式，我们这里注意下footer的slot，这个我们一般是把处理按钮放在这里，如对于查看界面对话框，我们定义如下所示。

  一般来说，对于表单内容比较多的场景，我们一般分开多个选项卡进行展示或者录入，这样方便管理，查看界面整体效果如下所示。

 对于对话框的数据绑定，我们在打开对话框前，先通过API模块请求获得JSON数据，然后绑定在对应的对话框模型属性上即可，如对于查看界面，我们的处理逻辑如下所示。

    showView(id) {
      var param = { id: id }
      GetProductDetail(param).then(data => {
        Object.assign(this.viewForm, data);
      })
      this.isView = true
    },

对于表格的双击，我们同样绑定它的查看明细处理操作，如下模板代码和JS代码所示。

模板HTML代码如下：

<el-table
  v-loading="listLoading"
  :data="productlist"