问尤龙の时光
<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>
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()
}
给表头设置overHidden就可以解决这个问题（avue.js设置该属性后，表格内容过长就不会显示了，鼠标移动上去，会显示tooltip展示内容）
代码中，由于我的表头时从后端获取的，所以遍历一遍表头，添加overHidden属性
for (var i = 0; i < data.hd.length; i++) {
data.hd[i]['overHidden'] = true
}
{
"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
}