解决vue2虚拟表格的问题umy-ui

cnpm i umy-ui --save

在main.js中引入样式，因为只是为了解决不分页的数据问题，所以插件要按需引入，且css要放置在最上方，防止干扰到其他的ui库样式

import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
import {
  UTableColumn,
  UTable,
  UxGrid,
  UxTableColumn
} from 'umy-ui'

Vue.use(UTableColumn)
Vue.use(UTable)
Vue.use(UxGrid)
Vue.use(UxTableColumn)

• 虚拟列表解决方案：如果数据量大，最好不要使用v-model绑定data，同时合计的数据不要使用前台计算，回出现精度丢失问题，除非是没有浮点值的数据。
• row-style可以对某行进行css设置

<template>
  <div>
    <ux-grid
      ref="plxTable"
      class="uxgrid"
      :height="height"
      @table-body-scroll="scroll"
      show-header-overflow="ellipsis"
      v-loading="listLoading"
      :row-style="rowstyle"
      :summary-method="getSummaries"
      show-summary
      :border="false"
    >
      <!-- <ux-table-column type="checkbox" width="80" /> -->
      <ux-table-column type="index" width="80" title="序号" />
      <ux-table-column
        v-for="item in columns"
        :key="item.id"
        
        :field="item.prop"
        :title="item.label"
        :width="item.width"
        :show-overflow="true"
      />
    </ux-grid>
  </div>
</template>

<script>
export default {
  props: {
    listLoading: {
      type: Boolean,
      default: false
    },
    arr: {
      type: Array,
      default: () => []
    },
	//后台返回的合计数据，从父组件拿到
    query4data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    arr(val) {
      val = JSON.parse(JSON.stringify(val))
      console.log(val)
      console.log(val.length)

      const temarr = []
      let len = 0

      if (val.length > 0) {
        for (const i in val[0].feeMonthMap) {
          len++
          temarr.push(i)
        }

        const col = ['管辖区名称', '费用名称', ...temarr]
        let width
        const mycollength = col.length
        if (mycollength === 2) {
          width = 700
        } else if (mycollength === 3) {
          width = 500
        } else if (mycollength === 4) {
          width = 400
        } else if (mycollength === 5) {
          width = 300
        } else if (mycollength === 6) {
          width = 250
        } else {
          width = 200
        }
        this.columns = Array.from({ length: len + 2 }, (_, idx) => ({
          prop: col[idx],
          id: idx,
          label: col[idx],
          width,
          resizable: true

        }))
      }

      const data = []

      val.forEach((el, idx) => {
        data[idx] = {
          id: idx + 1,
          管辖区名称: val[idx].villageName,
          费用名称: val[idx].itemName,
          iscolor: val[idx].isSubtotal
        }
        for (const i in temarr) {
          data[idx][temarr[i]] = val[idx].feeMonthMap[temarr[i]]
        }
      })

      console.log(data)
      this.datas = data // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
      this.$refs.plxTable.reloadData(this.datas)
    }
  },
  data() {
    return {
      height: 0,
      columns: [{ label: '管辖区名称' }, { label: '费用名称' }],
      scrollTop: 0,
      radio: 1
    }
  },
  mounted() {
    window.removeEventListener('resize', this.changeHeight)
    window.addEventListener('resize', this.changeHeight)

    this.changeHeight()
  },
  methods: {
    changeHeight() {
      // console.log(window.innerHeight)
      this.height = window.innerHeight - 420
    },
    scroll({ scrollTop, scrollLeft }) {
      this.scrollTop = scrollTop
    },
 
    rowstyle(v) {
      if (v.row.iscolor) {
        return 'color:#3856F2'
      }
    },
    getSummaries(val) {
      console.log(val)
      const { columns, data } = val
      const means = [] // 合计
      console.log(columns)
      columns.forEach((column, columnIndex) => {
        console.log(column,columnIndex)
        if (columnIndex === 0) {
          means.push('合计')
        } else {
          
         
          let x = this.query4data[column.title] 
          means[columnIndex] = x
		  // 自身计算的，结果有精度问题
          // const values = data.map((item, idx) => {
          //   if (item.iscolor) {
          //     return Number(item[column.property])
          //   } else {
          //     return '-'
          //   }
          // })
          // // 合计
          // if (!values.every(value => isNaN(value))) {
          //   means[columnIndex] = values.reduce((prev, curr) => {
          //     const value = Number(curr)
          //     if (!isNaN(value)) {
          //       // console.log(value.data.iscolor)

          //       return prev + curr
          //     } else {
          //       return prev
          //     }
          //   }, 0)
          //   means[columnIndex] += ' '
          // } else {
          //   means[columnIndex] = '-'
          // }
        }
      })
      return [means]
      
    }
  }
}
</script>
<style scoped lang="scss">
// 调整到40px会有bug

::v-deep .elx-table .elx-body--column.col--ellipsis,
::v-deep .elx-table .elx-footer--column.col--ellipsis,
::v-deep .elx-table .elx-header--column.col--ellipsis,
::v-deep .elx-table.elx-editable .elx-body--column {
    height: 40px;
}
.elx-table--main-wrapper{
  border:5px red solid !important
}
</style>