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

时间 2020-06-02

标签按部就班 vue+element vue element 前端应用开发表格列表页面查询展现字段转义处理繁體版

原文原文链接

在咱们通常开发的系统界面里面，列表页面是一个很是重要的综合展现界面，包括有条件查询、列表展现和分页处理，以及对每项列表内容可能进行的转义处理，本篇随笔介绍基于Vue +Element基础上实现表格列表页面的查询，列表展现和字段转义处理。html

在前面随笔《按部就班VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理》介绍了一个对产品列表的卡片式图片分页展现处理，其中涉及到了对于Element 组件分页控件的操做，本篇随笔继续深化这一组件的使用，结合表格展现来处理效果展现。前端

一、列表查询界面效果

在介绍任何代码处理逻辑以前，咱们先来作一个感官的认识，贴上一个效果图，在逐一介绍其中处理的步骤和注意事项。element-ui

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

二、查询区域的处理

查询区域通常的界面效果以下所示，除了包含一些经常使用的查询条件，并增长一些常规的处理按钮，如查询、重置、新增、批量删除、导入、导出等按钮。函数

对于查询区域来讲，它也是一个表单的处理，所以也须要添加一一个对应的对象来承载表单的数据，在data里面增长一个searchForm的模型对象，以及一个用于分页查询的pageinfo对象，以下代码所示。布局

export default {
  data() {
    return {
      listLoading: true,
      pageinfo: {
        pageindex: 1,
        pagesize: 10,
        total: 0
      },
      searchForm: {
        ProductNo: '',
        BarCode: '',
        ProductType: '',
        ProductName: '',
        Status: 0
      },

视图模板代码以下所示post

    <el-form ref="searchForm" :model="searchForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="产品编号" prop="ProductNo">
            <el-input v-model="searchForm.ProductNo" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品名称" prop="ProductName">
            <el-input v-model="searchForm.ProductName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品类型" prop="ProductType">
            <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>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="Status">
            <el-select v-model="searchForm.Status" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in Status"
                :key="item.Value"
                :label="item.Text"
                :value="item.Value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="float:right;padding-bottom:10px">
      <el-button icon="el-icon-search" type="primary" round @click="search()">查询</el-button>
      <el-button icon="el-icon-refresh-left" type="warning" round plain @click="resetForm('searchForm')">重置</el-button>
      <el-button icon="el-icon-document-add" type="success" round @click="showAdd()">新增</el-button>
      <el-button icon="el-icon-document-remove" type="danger" round @click="BatchDelete()">批量删除</el-button>
      <el-button icon="el-icon-upload2" type="danger" plain="" round @click="showImport()">导入</el-button>
    </el-row>

其中产品类型的是下拉列表，咱们经过在data区域获取一个对象，并在此遍历能够展现字典内容，若是咱们花点时间，能够把这些下拉列表统一按照一个常规的处理模式，定义一个字典组件的方式实现，简单赋予一个字典类型的Prop值，就能够绑定下拉列表了，这个稍后在细讲。ui

在Vue的脚本处理逻辑里面，咱们能够在Created声明周期里面，经过API获取数据，绑定在模型上，界面就会自动进行更新了，处理过程代码以下所示。this

  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()
  },
  methods: {
    getlist() { // 构造常规的分页查询条件
      var param = {
        type: this.producttype === 'all' ? '' : this.producttype,
        pageindex: this.pageinfo.pageindex,
        pagesize: this.pageinfo.pagesize
      };

      // 把SearchForm的条件加入到param里面，进行提交查询
      param.type = this.searchForm.ProductType // 转换为对应属性
      Object.assign(param, this.searchForm); // 获取产品列表，绑定到模型上，并修改分页数量
      this.listLoading = true
      GetProductList(param).then(data => {
        this.productlist = data.list
        this.pageinfo.total = data.total_count
        this.listLoading = false
      })
    },

其中 Object.assign(param, this.searchForm); 语句处理，是把得到的查询条件，覆盖原来对象里面的属性，从而实现查询条件的变量赋值。url

得到列表数据，就是介绍如何展现表格列表数据的过程了，表格界面效果以下所示。

先定义一个表格头部，相似HTML里面的<table>的标签，指定样式和一些常规的操做函数，以下代码所示。

    <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"
    >

具体的属性能够参考下Element组件关于表格控件的属性了，在表格列里面，咱们主要关注它的data绑定便可。

接着定义一列复选框选择的列，用于批量处理的勾选，如批量删除操做。

  <el-table-column type="selection" width="55"/>

接着就是根据返回JSON属性，逐一进行内容转换为表格列的展现过程了，以下所示。

  <el-table-column label="商品编号" width="80">
    <template slot-scope="scope">
      {{ scope.row.ProductNo }}
    </template>
  </el-table-column>

咱们若是须要在显示里面增长处理效果，通常在template里面修改展现效果便可，以下是单位的处理，增长一个tag标志强调下。

  <el-table-column align="center" label="单位" width="80">
    <template slot-scope="scope">
      <el-tag type="" effect="plain"> {{ scope.row.Unit }}</el-tag>
    </template>
  </el-table-column>

而对于一些须要判断处理的效果，咱们能够对内容进行判断输出，以下状态所示。

  <el-table-column label="状态" width="80">
    <template slot-scope="scope">
      <el-tag v-if="scope.row.Status==0" type="" effect="dark">正常</el-tag>
      <el-tag v-else-if="scope.row.Status==1" type="success" effect="dark">推荐</el-tag>
      <el-tag v-else-if="scope.row.Status==2" type="danger" effect="dark">停用</el-tag>
    </template>
  </el-table-column>

另外，对于一些常见的日期处理，咱们可使用Formatter，Filter等手段进行内容的转义处理，能够去掉后面的时间部分。

<el-table-column align="center" label="建立日期" width="120" prop="CreateTime" :formatter="dateFormat" />

dataFormat就是一个转义函数，函数代码以下所示。

    dateFormat(row, column, cellValue) {
      return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd') : ''
    },

使用的时候，须要在顶部引入一个类库便可

import * as fecha from 'element-ui/lib/utils/date'

对于相似须要进行字典转义的操做，咱们可使用Formatter的方式转义，如增长一个函数来解析对应的值为中文信息

效果可使用Formatter来转义

    productTypeFormat(row, column, cellValue) {
      var display = this.productTypes.get(cellValue)
      return display || ''
    },

也可使用Filter模式来进行处理。

这里介绍使用Filter的操做处理，首先在界面HTML代码里面增长对应的操做，以下代码所示。

  <el-table-column align="center" label="商品类型" width="120" prop="ProductType">
    <template slot-scope="scope">
      <el-tag type="danger">  {{ scope.row.ProductType | productTypeFilter }}</el-tag>
    </template>
  </el-table-column>

Filter其实就是一个 | 过滤符号，以及接着一个过滤函数处理便可。

export default {
  filters: {
    productTypeFilter: function(value) {
      if (!value) return ''

      var display = that.productTypes.get(value)
      return display || ''
    }
  },

值得注意的是，Filter自己不能引用data里面的属性列表进行转义的须要，若是须要，那么须要在beforeCreate的钩子函数里面记录this的引用，以下代码所示。

对于操做按钮，咱们须要增长一行来显示几个按钮便可，若是须要权限控制，能够再根据权限集合判断一下可操做权限便可。

      <el-table-column label="操做" width="140">
        <template scope="scope">
          <el-row>
            <el-tooltip effect="light" content="查看" placement="top-start">
              <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.ID)" />
            </el-tooltip>
            <el-tooltip effect="light" content="编辑" placement="top-start">
              <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.ID)" />
            </el-tooltip>
            <el-tooltip effect="light" content="删除" placement="top-start">
              <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.ID)" />
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>

这里showView/showEdit/ShowDelete主要就是作一些弹出层前的处理操做，咱们在data项里面定义了几个变量，用来肯定是那个操做显示的须要。

      isAdd: false,
      isEdit: false,
      isView: false,
      isImport: false,

例如对应编辑操做，咱们是须要经过API处理类，获取后端数据，并赋值给编辑框的表单对象上，进行展现便可。

    showEdit(id) {
      // 经过ID参数，使用API类获取数据后，赋值给对象展现
      var param = { id: id }
      GetProductDetail(param).then(data => {
        Object.assign(this.editForm, data);
      })
      this.isEdit = true
    },

对于查看处理，咱们除了在每行按钮上能够单击进行查看指定行记录外，咱们双击指定的行，也应该弹出对应的查看记录界面

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

这个就是表格定义里面的一些处理事件

    <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"
    >

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

而对于删除操做，咱们只须要确认一下，而后提交远端处理，返回正常结果，就提示用户删除成功便可。以下逻辑代码所示。

    showDelete(id) {
      this.$confirm('您确认删除选定的记录吗?', '操做提示',
        {
          type: 'warning' // success，error，info，warning
          // confirmButtonText: '肯定',
          // cancelButtonText: '取消'
        }
      ).then(() => {
        // 删除操做处理代码

        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

以上就是常规表格列表页面查询、列表展现、字段转义的一些常规操做，以及对新增、编辑、查看、删除操做的一些常规处理，经过对这些模型的操做，减小了咱们以往从新获取对应DOM的繁琐操做，是的数据的操做处理，变得方便了不少。

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

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

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

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

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