整理Vue项目开发过程中遇到的常见问题2

weixin_41697323

已于 2022-03-11 15:59:36 修改

阅读量1.4k

点赞数

分类专栏： ES6 Element 文章标签： vue es6 vue.js js

于 2020-05-08 10:43:58 首次发布

本文链接：https://blog.csdn.net/weixin_41697323/article/details/105990366

版权

51 表格当选择项发生变化事件selection-change，翻页搜索事件也会触发它，要改成手动事件

    // 按人员授权选中事件
    handleSelectWaitChoose (selection, row) {
      const index = this.tableData2.findIndex(item => item.id === row.id)
      if (~index) {
        this.tableData2 = this.tableData2.filter(item => item.id !== row.id)
      } else {
        this.tableData2.push(row)
      }
      this.userIds = this.tableData2.map(v => v.id)
    },
    // 按人员授权全部选中事件
    handleSelectWaitChooseAll (selection, flag) {
      if (selection && selection.length) {
        selection.forEach(item => {
          if (this.tableData2.findIndex(ele => ele.id === item.id) === -1) {
            this.tableData2.push(item)
          }
        })
      } else {
        this.tableData.forEach(item => {
          const index = this.tableData2.findIndex(ele => ele.id === item.id)
          if (index !== -1) {
            this.tableData2.splice(index, 1)
          }
        })
      }
      this.userIds = this.tableData2.map(v => v.id)
    },

52 表格el-table添加数据后自动定位到行前行尾， 注意别忘了 el-table增加ref属性！！！

// 增加一行数据, 限制20行
addRows (obj) {
    const data = JSON.parse(JSON.stringify(obj))
    this.tableData.push(data)
    if (this.tableData.length > 19) {
        this.isAddList = false;
    }
    this.$nextTick(() => {
        //滚动到最后一行
        this.$refs.tableData.bodyWrapper.scrollTop = this.$refs.tableData.bodyWrapper.scrollHeight 
    })
}
this.$refs.tableData.bodyWrapper.scrollTop = 0 //滚动到第一行

53 表格el-table 表尾合计行数据统计功能，表格列必需要设置prop属性，否则不起作用，因为show-summary属性不支持自定义列模板

  //汇总求和
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = this.$t('baseCommon.totalNumber');
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value)) && (columns[index].property === 'orderedQty')) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += '';
        } else if (columns[index].property === 'sku') {
          const sku = this.tableData.filter(v => v.sku).map(v => v.sku)
          const newSKU = new Set(sku)
          const newArray = Array.from(newSKU)
          sums[index] = newArray.length;
        } else {
          sums[index] = '';
        }

      });
      return sums;
    }