VueElement前端应用开发之表格列表展示

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

      
        
          
            
          
        
        
          
            
          
        
        
          
            
              
            
          
        
        
          
            
              
            
          
        
      
    
    
      查询
      重置
      新增
      批量删除
      导入
    

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' &＃63; '' : 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
      })
    },

dateFormat(row, column, cellValue) {
      return cellValue &＃63; 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 || ''
    },

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

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

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.ID
      this.showView(id);
    },

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

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