avue.js 表格

1.定义avue-crud

<el-dialog :visible.sync="detailDialog" title="明细" top="100px" width="90%">
      <avue-crud
        ref="detailTable"
        :data="detailData"
        :option="detailOption"
        :page.sync="detailPage"
        :over-hidden="true"
        @size-change="detailTableSizeChange"
        @current-change="detailTableCurrentChange">
        <div slot="footer" class="dialog-footer">
          <el-button @click="detailDialog = false">确 定</el-button>
        </div>
    </avue-crud></el-dialog>

2.属性配置

detailDialog控制显示
:data="detailData"定义表格数据
:option="detailOption"定义表格配置
:page.sync="detailPage"定义页码信息
@size-change="detailTableSizeChange"定义每页数据改变触发事件
@current-change="detailTableCurrentChange"定义页码改变触发事件

data中添加属性

detailDialog: false,
detailData: [],
      detailOption: {
        align: 'center',
        menuAlign: 'center',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        column: []
      },
      detailPage: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      }

methods中添加方法

getDetailTablePageData() {
      this.detailDialog = true
      const params = {
        currentPage: this.detailPage.currentPage,
        pageSize: this.detailPage.pageSize,
        changeIndexId: obj.changeIndexId
      }
      getDetailTablePageData(params).then(response => {
        if (response.status !== 200) {
          this.$message({
            message: response.errorMessage,
            type: 'error'
          })
        } else {
          const data = response.data
          this.detailData = data.bd
          for (var i = 0; i < data.hd.length; i++) {
            data.hd[i]['overHidden'] = true
          }
          this.detailOption.column = data.hd
          this.detailPage.total = parseInt(data.total)
        }
      })
    },
    detailTableSizeChange(pageSize) {
      this.detailPage.currentPage = 1
      this.detailPage.pageSize = pageSize
      this.getDetailTablePageData()
    },
    detailTableCurrentChange(currentPage) {
      this.detailPage.currentPage = currentPage
      this.getDetailTablePageData()
    }

3.处理表格数据太长的问题

给表头设置overHidden就可以解决这个问题(avue.js设置该属性后，表格内容过长就不会显示了，鼠标移动上去，会显示tooltip展示内容)

代码中，由于我的表头时从后端获取的，所以遍历一遍表头，添加overHidden属性

for (var i = 0; i < data.hd.length; i++) {
	data.hd[i]['overHidden'] = true
}

4.数据格式

{
    "status": 200, 
    "data": {
        "total": 1, 
        "bd": [
            {
                "defect_code": "配电运维班", 
                "site_id": "已消缺", 
                "site_name": "10kV四分场线",
                "device_name": "A2.3"
            }
        ], 
        "hd": [
            {
                "prop": "defect_code", 
                "label": "缺陷编号"
            }, 
            {
                "prop": "site_id", 
                "label": "地点编号"
            }, 
            {
                "prop": "site_name", 
                "label": "地点名称"
            }, 
            {
                "prop": "device_name", 
                "label": "设备名称"
            }
        ], 
        "message": "数据请求成功", 
        "status": false
    }, 
    "isOk": true, 
    "errorMessage": null, 
    "hasErrors": false, 
    "code": "200", 
    "success": true
}