亲宝软件园·资讯

展开

Vue Element常规Element界面组件 Vue Element前端应用开发之常规Element界面组件

伍华聪 人气:0
想了解Vue Element前端应用开发之常规Element界面组件的相关内容吗,伍华聪在本文为您仔细讲解Vue Element常规Element界面组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,element,vue,界面组件,下面大家一起来学习吧。

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

常规的列表展示界面,一般分为几个区域,一个是查询区域,一个是列表展示区域,一个是底部的分页组件区域。查询区域主要针对常规条件进行布局,以及增加一些全局或者批量的操作,如导入、导出、添加、批量添加、批量删除等按钮;而其中主体的列表展示区域,是相对比较复杂一点的地方,需要对各项数据进行比较友好的展示,可以结合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"
  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);
    },

2、常规界面组件的使用

一般情况下,我们使用界面组件的时候,参考下官网《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>

加载全部内容

相关教程
猜你喜欢
用户评论