vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用

vxe-table简单使用 vue vxe-table vue整合vxe-table vue2 vxe-table 简单使用

• 安装vxe-table
• 引用
• 使用

  安装vxe-table

  vue2稳定版本

  
  （图片来源网络，侵删）

  vue3稳定版本

  npm install xe-utils vxe-table@legacy
  

  安装 vxe-table 依赖的插件

  npm i xe-utils
  

  引用

  我这边是全局引入，可以根据自己情况按需引入

  main.js

        import Vue from 'vue'
        import VXETable from 'vxe-table'
        import 'vxe-table/lib/style.css'
        Vue.use(VXETable)
        // 给 vue 实例挂载内部对象，例如：
        // Vue.prototype.$XModal = VXETable.modal
        // Vue.prototype.$XPrint = VXETable.print
        // Vue.prototype.$XSaveFile = VXETable.saveFile
        // Vue.prototype.$XReadFile = VXETable.readFile
  

  使用

  我这边使用的 demo 用到了 虚拟滚动,列筛选，自定义列内容 ，可直接全复制

  
   		清除所有的筛选条件
         
        
  
          
  			
            
              
              
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
              
                
              
            
            
            
            
              
                
              
            
            
            
              
                
              
            
            
              
                
  
                  修改
                  删除
                
              
            
          
        
  
  
  export default {
    name: 'Index',
    components: {},
    props: [],
    data() {
      return {
      
        tableData: [ {
                  "id": 1006,
                  "machineTypeName": "Cheng Fat",
                  "auxiliaryMaterialName": "Cheng Fat",
                  "brand": "aeaVNGZ7An",
                  "specification": "IhABS5QBlX",
                  "packageAmount": "14LBJIvbgZ",
                  "materialNumber": "Ik8mzrfSWg",
                  "dosage": "4FOZcY3KEF",
                  "usePosition": "DWI5RHkBIY",
                  "doc": "nT65qhLkvI",
                  "addTime": "2017-09-10 00:22:20",
                  "addUserName": "Cheng Fat",
                  "updateTime": "2021-04-16 15:04:40",
                  "updateUserName": "2005-09-24"
              },
              {
                  "id": 1005,
                  "machineTypeName": "Yuen Tsz Hin",
                  "auxiliaryMaterialName": "Yuen Tsz Hin",
                  "brand": "e7fPgpqElq",
                  "specification": "l57klAlUd4",
                  "packageAmount": "6Y4e7xcfWg",
                  "materialNumber": "2FOmQSMC8H",
                  "dosage": "TfdbMdn10B",
                  "usePosition": "vFVoDlRbYI",
                  "doc": "6sArmCG4oP",
                  "addTime": "2002-08-12 05:47:08",
                  "addUserName": "Yuen Tsz Hin",
                  "updateTime": "2009-09-21 22:40:57",
                  "updateUserName": "2001-04-10"
              }],
        search: {
          machineTypeName: '',
          auxiliaryMaterialName: '',
          brand: '',
          specification: '',
          packageAmount: '',
          materialNumber: '',
          dosage: '',
          usePosition: '',
          addUserName: '',
          updateUserName: ''
        }
      }
    },
    computed: {},
    watch: {},
    beforeMount() { },
    mounted() { },
    created() {
    },
    activated() {
    },
    methods: {
      /**
       *  当筛选条件发生变化时会触发该事件,api: https://vxetable.cn/v3/#/table/api?filterName=filter-change
       * @param {*} column 当前筛选的列属性
       * @param {*} property 当前筛选的列名称
       * @param {*} values 不知道，忽略
       * @param {*} datas 当前表格所有列的筛选数据值列表
       * @param {*} filterList 当前表格所有列的筛选数据列表，带列属性和值
       * @param {*} $event 事件
       */
      filterChangeEvent({ column, property, values, datas, filterList, $event }) {
        console.info('列筛选')
        // console.info('column', column)
        // console.info('property', property)
        // console.info('values', values)
        // console.info('datas', datas)
        console.info('filterList', filterList)
        // console.info('$event', $event)
        
        // 先清空之前的搜索对象信息
        this.search = {
          machineTypeName: '',
          auxiliaryMaterialName: '',
          brand: '',
          specification: '',
          packageAmount: '',
          materialNumber: '',
          dosage: '',
          usePosition: '',
          addUserName: '',
          updateUserName: ''
        }
        // 遍历当前表所有的筛选数据，赋值给搜索对象
        filterList.forEach(item => {
          // 将当前筛选的列条件数据赋值给 查询对象
          console.info(item)
          // item.property 当前筛选条件的列名称
          // item.datas[0] 当前筛选条件的列值 因为 每列的 filters 数组数据 只有一个元素，固定0
          this.search[item.property] = item.datas[0]
        })
        console.info('查询参数', this.search)
        // 将参数传递到后台进行查询
      },
      // 表格单个列筛选，这个筛选的是 当前表数据，不使用这个
      filterMethod({ value, row, column }) {
      },
      
      // 清空表格所有查询条件
      clearFilter() {
        this.$refs.xTable1.clearFilter()
        // 清空查询对象
        this.search = {
          machineTypeName: '',
          auxiliaryMaterialName: '',
          brand: '',
          specification: '',
          packageAmount: '',
          materialNumber: '',
          dosage: '',
          usePosition: '',
          addUserName: '',
          updateUserName: ''
        }
        // 重新请求服务端查询
        
      }
      
      // 删除
      deleteById(row, index) {
        console.info(row, index)
      },
      // 打开修改 弹出框
      showChange(row) {
        console.info(row)
      }
    }
  }
  
  
  
  

  
  （图片来源网络，侵删）
  
  （图片来源网络，侵删）