按部就班VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

时间  2020-06-04
标签 按部就班 vue+element vue element 前端 应用 开发 常规 界面 组件 使用 繁體版
原文   原文链接

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

一、列表界面和其余模块展现处理

在前面随笔《按部就班VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展现和字段转义处理》介绍了基于列表展现了相关数据，并在列表界面整合了增删改查等常规的业务操做处理。前端

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

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

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

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

在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"
  border
  fit
  stripe
  highlight-current-row
  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  @selection-change="selectionChange"
  @row-dblclick="rowDbclick"
>

JS逻辑代码以下　　

    rowDbclick(row, column) {
      var id = row.ID
      this.showView(id);
    },

 

二、常规界面组件的使用

 通常状况下，咱们使用界面组件的时候，参考下官网《Element组件使用》，寻找对应组件的代码进行参考，就差很少了，这里仍是就各类常规的Element组件进行大概的介绍吧。

1）表单和表单项、单文本框

对于表单，咱们通常定义一个对应的名称，并设置它的data对应的模型名称便可，以下所示。

<el-form ref="viewForm" :model="viewForm" label-width="80px">

而表单项，通常是定义好表单项的Label便可，而后在其中插入对应的录入控件或者展现控件。如对于单文本组件使用，以下所示。

 <el-form-item label="产品编号">
   <el-input v-model="editForm.ProductNo" />
 </el-form-item>

其中 v-model="editForm.ProductNo"  就是对应绑定的数据。

而表单项，能够添加对字段的验证处理，在数据提交前，能够校验客户的录入是否有效等。

  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

注意这里表单项，必须添加一个prop的属性设置，如 prop="email" 所示。

通常为了控制布局，咱们还结合el-row进行一个布局的处理，以下代码所示（一行等于span为24，span=12也就是一行放两个控件组）。

<el-row>
  <el-col :span="12">
    <el-form-item label="产品编号">
      <el-input v-model="editForm.ProductNo" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="条码">
      <el-input v-model="editForm.BarCode" />
    </el-form-item>
  </el-col>
</el-row>

 

2）、下拉列表控件的绑定

下拉列表的绑定处理，也是经过 v-model 进行值的绑定，而选项则能够经过数据列表进行绑定。

<el-form-item label="商品类型">
  <el-select v-model="editForm.ProductType" filterable="" placeholder="请选择">
    <el-option
      v-for="(item, key) in typeList"
      :key="key"
      :label="item.value"
      :value="item.key"
    />
  </el-select>
</el-form-item>

而选项中的 typeList，咱们能够在页面初始化的时候获取出来便可。

  created() {
    // 获取产品类型，用于绑定字典等用途
    GetProductType().then(data => {
      if (data) {
        data.forEach(item => {
          this.productTypes.set(item.id, item.name)
          this.typeList.push({ key: item.id, value: item.name })
        })

        // 获取列表信息
        this.getlist()
      }
    });
  },

对于textarea常规的多行文本框，其实和普通单行文本框处理差很少，指定它的type="textarea" 和 rows的数值便可。

  <el-tab-pane label="说明" name="second">
    <el-form-item label="说明">
      <el-input v-model="editForm.Description" type="textarea" :rows="10" />
    </el-form-item>
  </el-tab-pane>

而对于一些可能须要展现HTML内容的，咱们可使用DIV控件来展现，经过v-html标识来处理包含HTML代码的内容。

  <el-tab-pane label="详细说明">
    <el-form-item label="详细说明">
      <div class="border-radius" v-html="viewForm.Note" />
    </el-form-item>
  </el-tab-pane>

 

3）、图片展现

对于一些须要展现服务器图片，咱们请求后，根据Element图片组件的设置处理便可，以下包括单个图片和多个图片的展现和预览操做。

 图片展现的代码以下所示。

  <el-tab-pane label="图片信息">
    <el-form-item label="封面图片">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Picture"
        :preview-src-list="[viewForm.Picture]"
      />
    </el-form-item>
    <el-form-item label="Banner图片">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Banner"
        :preview-src-list="[viewForm.Banner]"
      />
    </el-form-item>
    <el-form-item label="商品展现图片">
      <el-image
        v-for="item in viewForm.pics"
        :key="item.key"
        class="border-radius"
        :src="item.pic"
        style="width: 100px; height: 100px;padding:10px"
        :preview-src-list="getPreviewPics()"
      />
    </el-form-item>
  </el-tab-pane>

上图中，若是是单个图片，那么预览咱们设置一个集合为一个url便可，如 [viewForm.Banner]，若是是多个图片，须要经过一个函数来获取图片列表，如 getPreviewPics() 函数所示。

    getPreviewPics() {
      // 转换ViewForm.pics里面的pic集合
      var list = []
      if (this.viewForm.pics) {
        this.viewForm.pics.forEach(item => {
          if (item.pic) {
            list.push(item.pic)
          }
        })
      }
      return list
    }

 

4）、第三方扩展控件

对于一些须要使用扩展组件的，咱们通常搜索下解决方案，经过npm安装对应的组件便可解决，如对于条码和二维码，我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode，通常在Github上搜索下关键字，总能找到一些很受欢迎的第三方组件。

  安装这些组件都有具体的说明，以下所示(若是卸载，直接修改install为uninstall便可）。

npm install @chenfengyuan/vue-barcode vue

以及

npm install @chenfengyuan/vue-qrcode vue

条码和二维码的展现效果以下所示

若是全局引入barcode和qrcode 组件，咱们在main.js里面引入便可，以下代码所示

// 引入barcode,qrcode
import VueBarcode from '@chenfengyuan/vue-barcode';
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueBarcode.name, VueBarcode);

  

 富文本编辑，我这里采用了 Tinymce 第三方组件来实现编辑处理，展现效果以下所示。

  代码以下所示

  <el-tab-pane label="详细说明" name="third">
    <el-form-item label="详细说明">
      <tinymce v-model="editForm.Note" :height="300" />
    </el-form-item>
  </el-tab-pane>

以上就是一些常规的界面组件的使用，后面在继续介绍文件上传和图片结合的操做。

三、自定义组件的建立使用

使用Vue的比以往BS开发的好处，就是能够很容易实现组件化，这点很好，一旦咱们定义好一个控件，就能够在多个界面里面进行使用，很是方便，并且封装性能够根据本身的须要进行处理。

查询区域通常的界面效果以下所示，除了包含一些经常使用的查询条件，通常会有一些下拉列表，这些多是后台字典里面绑定的内容，能够考虑做为一个通用的字典下拉列表组件来作。

其实界面录入的时候，也每每须要这些条件下拉列表的。

  那么咱们来定义一个自定义组件，并在界面上使用看看。

在Components目录建立一个目录，并建立一个组件的vue文件，命名为my-dictdata.vue，以下所示。

 界面模板代码咱们就一个select组件为主便可。

<template>
  <el-select v-model="svalue" filterable clearable placeholder="请选择">
    <el-option
      v-for="(item, index) in dictItems"
      :key="index"
      :label="item.Text"
      :value="item.Value"
    />
  </el-select>
</template>

script脚本逻辑代码以下所示。

<script>
// 引入API模块类方法
import { GetDictData } from '@/api/dictdata'

export default {
  name: 'MyDictdata', // 组件的名称
  props: {
    typeName: { // 字典类型方式，从后端字典接口获取数据
      type: String,
      default: ''
    },
    options: {// 固定列表方式，直接绑定
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      dictItems: [], // 设置的字典列表
      svalue: '' // 选中的值
    }
  },
  watch: {
    // 判断下拉框的值是否有改变
    svalue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', this.svalue);
      }
    }
  },
  mounted() {
    var that = this;

    if (this.typeName && this.typeName !== '') {
      // 使用字典类型，从服务器请求数据
      GetDictData(this.typeName).then(data => {
        if (data) {
          data.forEach(item => {
            if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
              that.dictItems.push(item)
            }
          });
        }
      })
    } else if (this.options && this.options.length > 0) {
      // 使用固定字典列表
      this.options.forEach(item => {
        if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
          that.dictItems.push(item)
        }
      });
    }
    // 设置默认值
    this.svalue = this.value;
  },
  methods: {

  }
}
</script>

主要就是处理字典数据的获取，并绑定到模型对象上便可。

在页面上使用前，须要引入咱们定义的组件

import myDictdata from '@/components/Common/my-dictdata'

而后包含进去components里面便可

export default {
  components: { myDictdata },

那么原来须要直接使用select组件的代码

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
  <el-option
    v-for="(item, key) in typeList"
    :key="key"
    :label="item.value"
    :value="item.key"
  />
</el-select>

则能够精简为一行代码

<my-dictdata v-model="searchForm.ProductType" type-name="商品类型" />

而对于固定列表的，咱们也能够通用的处理代码

<my-dictdata v-model="searchForm.Status" :options="Status" />

其中Status是定义的一个对象集合

  Status: [
    { Text: '正常', Value: 0 },
    { Text: '推荐', Value: 1 },
    { Text: '停用', Value: 2 }
  ]

是否是很是方便，而获得的效果则不变。

 

 以上就是多个页面内容，经过对话框层模式整合在一块儿，并介绍如何使用，以及对界面中常见的Element组件进行介绍如何使用，以及定义一个字典列表的主定义组件，用于简化界面代码使用，

 

列出如下前面几篇随笔的链接，供参考：

按部就班VUE+Element 前端应用开发(1）--- 开发环境的准备工做

按部就班VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

按部就班VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

按部就班VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

按部就班VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展现和字段转义处理

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程