avue table crud

最新推荐文章于 2024-05-22 10:19:55 发布

胜杰720

最新推荐文章于 2024-05-22 10:19:55 发布

阅读量285

点赞数

文章标签：前端 javascript 数据库

本文链接：https://blog.csdn.net/weixin_71574589/article/details/128344958

版权

<avue-crud
      :data="data"            //数据
      :option="option"        //配置
      @size-change="sizeChange"  //显示条数改变是出发
      :summary-method="summaryMethod"   //合计
      @current-change="currentChange"   //当前页改变时触发
      @selection-change="selectionChange"  多选框
      @refresh-change="refreshChange"   //	点击刷新按钮触发该事件
      :page.sync="page"        //分页
    >
    </avue-crud>


//copy
<avue-crud
      :data="data"
      :option="option"
      @size-change="sizeChange"
      :summary-method="summaryMethod"
      @current-change="currentChange"
      @selection-change="selectionChange"
      @refresh-change="refreshChange"
      :page.sync="page"
    >
    </avue-crud>

//data 
page: {
        //总条数为0什么都不展示
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: common.pageSize, //每页显示多少条
        pageSizes: [
          common.pageSize,
          common.pageSize * 2,
          common.pageSize * 3,
          common.pageSize * 4,
        ],
      },
data: [],
      option: {
        searchMenuSpan: 18, //控制搜索加按钮
        border: true, //边框
        addBtn: false, //不显示自带的新增按钮
        viewBtn: false, //查看按钮
        editBtn: false, //编辑按钮
        showSummary: true,   //合并
        delBtn: false, //删除按钮
        index: true, //序号
        indexLabel: "序号",
        selection: true,
        searchBtn: true,
        refreshBtn:false,
        menu: false, //操作
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "1",
            prop: "chargeName",
          },
          {
            label: "1",
            prop: "setOnebycharId",
          },
          {
            label: "1量",
            prop: "setOnebycharId",
          },
          {
            label: "1",
            prop: "setZerobycharId",
          },
          {
            label: "1",
            prop: "zerobycharIdbydate",   
          },
          {
            label: "1",
            prop: "getreginnum",
          },
          {
            label: "1",
            prop: "builDevNum",
          },
          {
            label: "1",
            prop: "daydevnum",
          },
          {
            label: "1",
            prop: "dayeqpnum",
          },
          {
            label: "积1",
            prop: "sumdayeqpnum",
          },
          {
            label: "1",
            prop: "useratebydate",  
          },
          {
            label: "11",
            prop: "sex", //
          },
        ],
      },

//methods
//合计
    summaryMethod({ columns, data }) {
      const sums = [];
      if (columns.length > 0) {
        columns.forEach((column, index) => {
          if ([0].includes(index)) {
            sums[index] = '合计'
          } else if (['deptName', 'mrSectNo', 'mrSectName', 'operReader', 'mrPeriod',].includes(column.property)) {//过滤某些字段不参与计算
            sums[index] = '-'
          } else {
            let values = data.map(item => Number(item[column.property]));
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0);
            }
 
          }
        });
      }
      return sums;
    },
currentChange(val) {
      this.page.currentPage = val;
}
  //显示条数改变是出发
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.page.currentPage = 1;
}