<template>
<div class="custom-tree-container">
<div class="block">
<el-tree
class="filter-tree"
:data="data"
node-key="id"
default-expand-all
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<div v-if="data.id == checkId">
<el-button type="text" size="mini" @click="() => edit(data)">
<i class="el-icon-edit"></i>
</el-button>
<el-button type="text" size="mini" @click="() => append(data)">
<i class="el-icon-circle-plus-outline"></i>
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)"
>
<i class="el-icon-delete"></i>
</el-button>
</div>
</span>
</span>
</el-tree>
</div>
<a-modal
title="新建目录"
:visible="visible"
:confirm-loading="downLoading"
:destroyOnClose="true"
cancelText="取消"
okText="确认"
@ok="downOk"
@cancel="downHandle"
>
<a-form-model
ref="ruleForm"
:model="ruleForm"
:rules="rules"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 16 }"
>
<a-form-model-item label="目录名称" prop="catalogName">
<el-input placeholder="请输入目录名称" v-model="ruleForm.catalogName">
</el-input>
</a-form-model-item>
<a-form-model-item label="描述" prop="description">
<el-input
type="textarea"
:rows="4"
placeholder="请输入描述,1024个字符以内"
v-model="ruleForm.description"
maxlength="1024"
>
</el-input>
</a-form-model-item>
</a-form-model>
</a-modal>
</div>
</template>
<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
data() {
return {
myPlayer: null,
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
},
],
checkId: null,
visible: false,
downLoading: false,
operationType: 1,
ruleForm: {},
rules: {
catalogName: [
{ required: true, trigger: "blur", message: "请输入目录名称!" },
],
description: [
{ required: true, trigger: "blur", message: "请输入描述!" },
],
},
};
},
mounted() {
this.myPlayer = videojs("myvideo");
this.myPlayer.src([
{
type: "application/x-mpegURL",
src:
"http://39.173.75.10:10021/hls2/DE9B540175BBF591771D0BFA1622EB9C.m3u8",
},
]);
this.myPlayer.play();
},
methods: {
handleNodeClick(data) {
this.checkId = data.id;
},
edit() {},
append(data) {
this.visible = true;
// const newChild = { id: id++, label: "testtest", children: [] };
// if (!data.children) {
// this.$set(data, "children", []);
// }
// data.children.push(newChild);
},
remove(node, data) {
console.log(node);
console.log(data);
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex((d) => d.id === data.id);
children.splice(index, 1);
},
downOk() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.downLoading = true;
this.visible = false;
let params;
if (this.operationType == 1) {
params = {
catalogName: this.ruleForm.catalogName,
description: this.ruleForm.description,
leafNode: true,
parentId: this.selfId,
};
this.ruleForm = {};
this.downLoading = false;
createChildrenNode(params).then((res) => {});
} else if (this.operationType == 2) {
params = {
catalogName: this.ruleForm.catalogName,
description: this.ruleForm.description,
leafNode: true,
id: this.selfId,
};
this.downLoading = false;
this.ruleForm = {};
editNode(params).then((res) => {});
}
} else {
return false;
}
});
},
downHandle() {
this.visible = false;
},
},
};
</script>
<style scoped>
.custom-tree-container {
width: 700px;
height: 800px;
margin: 0 auto;
margin-top: 100px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.custom-tree-container /deep/ .el-button--mini {
font-size: 16px;
}
#myvideo {
width: 400px;
height: 500px;
}
</style>
tree自定义图标操作和长度显示
最新推荐文章于 2024-04-24 16:13:35 发布