循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

export default{

  data() {return{

      listLoading:true,

      pageinfo: {

        pageindex:1,

        pagesize:10,

        total:0},

      searchForm: {

        ProductNo:'',

        BarCode:'',

        ProductType:'',

        ProductName:'',

        Status:0},

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

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 = trueGetProductList(param).then(data=>{this.productlist =data.listthis.pageinfo.total =data.total_countthis.listLoading = false})

    },

    <el-tablev-loading="listLoading":data="productlist"border

      fit

      stripe

      highlight-current-row

      :header-cell-style="{background:'#eef1f6',color:'#606266'}"@selection-change="selectionChange"@row-dblclick="rowDbclick"
    >

  <el-table-columntype="selection"width="55"/>

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

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

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

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

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

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

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

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

export default{

  filters: {

    productTypeFilter:function(value) {if (!value) return ''

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

  },

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

      isAdd: false,

      isEdit:false,

      isView:false,

      isImport:false,

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.IDthis.showView(id);

    },

    <el-tablev-loading="listLoading":data="productlist"border

      fit

      stripe

      highlight-current-row

      :header-cell-style="{background:'#eef1f6',color:'#606266'}"@selection-change="selectionChange"@row-dblclick="rowDbclick"
    >

showDelete(id) {this.$confirm('您确认删除选定的记录吗?', '操作提示',

        {

          type:'warning' //success，error，info，warning
          //confirmButtonText: '确定',
          //cancelButtonText: '取消'
}

      ).then(()=>{//删除操作处理代码

        this.$message({

          type:'success',

          message:'删除成功!'});

      }).catch(() =>{this.$message({

          type:'info',

          message:'已取消删除'});

      });

    },