# 关于el-table总结

关于el-table总结

[toc]

1.生成表数据：created(){ }

// 组件勾子获取api数据
created() {this.$api.nesting.getdata().then((res) => {// ok表示请求成功的数据console.log(res)// 把请求到的数据给testDatas数组this.tableData = res}).catch(function (res) {alert(res)})
}

2.多选：type="selection"

// 增加一列：type="selection"

3.展开： type="expand"

// 增加一列：type="expand"

4.判断是否展开：@expand-change

// @expand-change：是否展开事件

// 关于el-table中是否展开的处理handleExpandChange(row,rows) {//第一个参数是当前行的数据，第二个参数是当前展开行的数组，注：展开时数组加一收起时数组减一//id是表示columnd的列对应数据字段id，点击该列的id与父表数组列id相同时，则isExpand为true，否则为falseconst isExpend = rows.some(r => r.id === row.id)//将展开的父表记录赋值给data对象的expandRows字段this.expandRows = rows//如果父表的某列点击展开，则会if (isExpend) {console.log("我展开啦！")} else {return}}

5.获取选中记录：ref="multipleTable"， this.$refs.multipleSonTable.selection

// 关于el-table是否选中的处理
handleAdd() {const expands = this.expandRowsconsole.log(this.$refs.multipleTable.selection)// 如果父表有展开，则去取选取的记录if (expands.length>0) {console.log(this.$refs.multipleSonTable.selection)}
},

6.源码

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！