圖例:
步驟:
1.添加屬性
2.在data中添加: expands: [ ]
3.創建方法函數
methods: {
setLabel() {
let _this = this;
this.$nextTick(() => {
let cellDiv = document.getElementsByClassName("cell use")[0];
cellDiv.setAttribute("style", "cursor:pointer");
let node = document.createElement("i");
node.setAttribute("class", "el-icon el-icon-arrow-right");
node.setAttribute("id", "ICON");
node.setAttribute("isExpand", "no"); //设置属性is-expand的值
node.onclick = function() {
_this.cellDivClick.call(_this, node);
};
cellDiv.appendChild(node);
});
},
cellDivClick(ele) {
console.log(ele);
let expandState = ele.getAttribute("isExpand"); //获取属性is-expand的值
//关闭的情况点击
if (expandState === "no") {
//展开
const $table = this.$refs.topicTable;
$table.data.map(item => {
$table.toggleRowExpansion(item, true);
});
ele.setAttribute("class", "el-icon el-icon-arrow-down");
ele.setAttribute("isExpand", "yes");
} else if (expandState === "yes") {
//展开的情况点击关闭
const $table = this.$refs.topicTable;
$table.data.map(item => {
$table.toggleRowExpansion(item, false);
});
ele.setAttribute("class", "el-icon el-icon-arrow-right");
ele.setAttribute("isExpand", "no");
}
},
}
4.mounted中運行函數
async mounted() {
this.setLabel();
},