1: table-tree 组件:
此组件主要是在element-ui的el-tree的基础上,实现table-tree的组件封装,此组件主要是提供封装的思路。
<div class="content-tab">
<div class="tree-super">
<div style="border: 1px solid #D4D9E1;">
<ul class="titie">
<li>学科名称</li>
<li>课程数</li>
<li>创建时间</li>
<li>操作</li>
</ul>
<el-tree class="dis-man-tree"
:data="treeData"
:props="props"
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
</div>
</div>
</div>
style 样式:
.content-tab {
.tree-super {
padding: 11px 20px;
.titie {
width: 100%;
overflow: hidden;
display: flex;
box-sizing: border-box;
li {
height: 40px;
line-height: 40px;
background-color: #ebedf8;
text-align: center;
border-left: 1px solid #d4d9e1;
}
li:first-child {
padding-left: 22px;
height: 40px;
line-height: 40px;
width: 303px;
background-color: #ebedf8;
box-sizing: border-box;
border-left: 0;
}
li:nth-child(n + 2) {
flex: 1;
}
}
}
}
js 部分:
import BreadTab from "@/components/BreadTab/BreadTab.vue";
import DialogAdd from "@/components/DialogTemplate/DialogTemplate.vue";
export default {
data() {
return {
selectDis: "1",
options: [
{
value: "1",
label: "全部"
},
{
value: "2",
label: "PMP"
}
],
props: {
label: "name",
children: "children",
value: "id"
},
treeData: [
{
id: 1,
name: "PMP",
children: [
{
id: 3,
name: "PMP"
},
{
id: 4,
name: "PMP培训考试"
}
]
},
{
id: 2,
name: "软考",
children: [
{
id: 5,
name: "软考"
},
{
id: 6,
name: "软考在线"
},
{
id: 7,
name: "软考培训"
}
]
}
],
isShowAdd: false,
inputDisName: ""
};
},
components: {
BreadTab,
DialogAdd
},
methods: {
addDis() {
console.log("添加学科");
this.isShowAdd = true;
},
renderContent(h, { node, data }) {
let titie = "";
let wid = "";
if (node.level != 1) {
wid = 280 - (node.level - 1) * 18 + "px";
titie = h(
"span",
{
style: {
display: "inline-block",
width: wid,
height: "50px",
"line-height": "50px"
}
},
node.label
);
} else {
titie = (
<span style="display:inline-block;width:280px;line-height: 50px;">
{node.label}
<i
class="el-icon-circle-plus"
style="color: #2972FA; margin-left: 9px;"
on-click={() => this.addSubDis(node, data)}
></i>
</span>
);
}
return (
<div class="orgBox" style="width:100%">
<span class="custom-tree-node" style="display: flex;">
{titie}
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;">
200
</span>
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;">
2020-05-22 16:03:22
</span>
<span style="display:inline-block;flex:1; height: 50px;line-height: 50px; text-align: center; border-left: 1px solid #d4d9e1;">
<el-button
size="mini"
style="color: #fff; background-color: #2972FA; border-color: #2972FA;"
on-click={() => this.append(data, node)}
>
编辑
</el-button>
<el-button
size="mini"
style="color:#fff; background-color: #E24C4C; border-color: #E24C4C;"
on-click={() => this.remove(node, data)}
>
删除
</el-button>
</span>
</span>
</div>
);
},
addSubDis(node, data) {
console.log(node);
console.log(data);
this.isShowAdd = true;
},
hiddenShow(data) {
if (data.num === 2 && !this.inputDisName) {
this.$message.error("输入学科名称不能为空呦");
} else {
this.isShowAdd = false;
}
},
remove(node, data) {},
append(node, data) {}
}
};