使用树形控件实现,详情看文档 https://element.eleme.cn/#/zh-CN/component/tree
<template>
<div class="container">
<div class="trees">
<div class="treeP">
<p class="titles">
<label class="la">
<span>
</span>
</label>
</p>
<div class="tree1">
<el-tree
ref="tree"
v-loading="listLoading"
:data="data"
show-checkbox
expand-on-click-node
:check-on-click-node="true"
node-key="id"
@check="handleCheckChange"
/>
</div>
</div>
<div class="btn">
<el-button type="primary" icon="el-icon-arrow-right" circle />
</div>
<div class="treeP">
<p class="titles">
<label>
<span @click="quit">
清空
</span>
</label>
</p>
<div class="tree1">
<el-tree
:data="data1"
node-key="id"
draggable
:expand-on-click-node="true"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ data.brand }} {{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)"
>
删除
</el-button>
</span>
</span>
</el-tree>
</div>
</div>
</div>
<!-- 按钮 -->
<div slot="footer" class="dialog-footer">
<p style="margin: 20px;" />
<el-button style="margin-left: 80.5%;" @click="cancel">取 消</el-button>
<el-button type="primary" @click="updata">确 定</el-button>
</div>
</div>
</template>
<script>
import api from '@/api/product'
export default {
name: 'Shuttle',
props: ['type', 'film_id'],
data() {
return {
listLoading: false,
checked: false,
data1: [],
data: [],
echo: {
strId: '',
name: []
}
}
},
created() {
this.listLoading = true
const data = this.film_id !== undefined ? this.film_id : ''
api.getTreeList({ film_id: data }).then(res => {
this.data = res.data
this.listLoading = false
})
},
methods: {
// 删除
remove(node, 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)
// 取消勾中
this.$refs.tree.setChecked(data.id, false)
},
// 全删
quit() {
this.data1 = []
this.$refs.tree.setCheckedKeys([])
},
// 添加
handleCheckChange(data, checked) {
this.data1 = []
checked.checkedNodes.forEach((item, index) => {
if (item.children === undefined || item.children.length === 0) {
item.brand = this.clean(this.data, item.id)
this.data1.push(item)
}
})
// console.log(this.data1)
},
// 添加系列
clean(data, id) {
let name = ''
data.forEach((item, index) => {
if (item.children.length > 0) {
item.children.forEach((i, ind) => {
if (i.children.length > 0) {
i.children.forEach((j, indexs) => {
if (j.id === id) {
name = i.label
}
})
}
})
}
})
return name
},
// 确定
updata() {
let str = ''
this.data1.forEach((item, index) => {
str += item.id + ','
this.echo.name.push(item.brand + item.label)
})
this.echo.strId = str.substr(0, str.length - 1)
if (this.type === 1) {
// 新增
this.$emit('code', this.echo)
this.quit()
} else {
// 编辑
api.addFilmModelRelation({ film_id: this.film_id, model_ids: this.echo.strId }).then(res => {
this.$emit('code', '编辑')
this.quit()
})
}
},
// 取消
cancel() {
this.$emit('code', '取消')
}
}
}
</script>
<style>
.container{
/* width: 1200px; */
/* height: 700px; */
/* margin:50px auto; */
padding: 0;
}
.trees{
width: 100%;
/* margin: 0 auto; */
display: flex;
justify-content: space-around;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.tree1{
height: 500px;
padding: 5px;
overflow: scroll;
overflow-x:hidden ;
}
.treeP{
width:40%;border: 1px solid #ebeef5;border-radius:5px;
}
.titles{
height: 40px;
border-bottom: 1px solid #f5f7fa;
margin: 0;
box-sizing: border-box;
padding: 0 5%;
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.btn{
margin: auto;
}
</style>