版权声明：本文为QQ帝国原创博客，非经本人同意，且勿转载。。 https://blog.csdn.net/QQ_Empire/article/details/83690632
dataTranslate.js
import Vue from 'vue'
function DataTransfer (data) {
if (!(this instanceof DataTransfer)) {
return new DataTransfer(data, null, null)
}
}
// 数据转换
DataTransfer.treeToArray = function (data, parent, level, expandedAll) {
let tmp = []
Array.from(data).forEach(function (record) {
if (record._expanded === undefined) {
Vue.set(record, '_expanded', expandedAll)
}
if (parent) {
Vue.set(record, '_parent', parent)
}
let _level = 0
if (level !== undefined && level !== null) {
_level = level + 1
}
Vue.set(record, '_level', _level)
tmp.push(record)
if (record.children && record.children.length > 0) {
let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll)
tmp = tmp.concat(children)
}
})
return tmp
}
export default DataTransfer
Tabletree.vue
<template>
<div class="table-box">
<p v-if="fixedHead" class="header-box">{{fixedHead}}</p>
<el-table :data="data" border fit height="calc(100% - 40px)" style="width: 100%" :row-style="showTr" tooltip-effect="dark" class="tree-table">
<el-table-column type="selection" width="40">
</el-table-column>
<el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" :min-width="firstWidth(index)" show-overflow-tooltip :align="firstAlign(index)">
<template slot-scope="scope">
<span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space" :key="levelIndex"></span>
<span class="button" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-remove" aria-hidden="true"></i>
<i v-if="scope.row._expanded" class="el-icon-circle-plus" aria-hidden="true"></i>
</span>
<span v-else-if="index===0" class="ms-tree-space"></span>
{{scope.row[column.dataIndex]}}
</template>
</el-table-column>
<el-table-column label="操作" width="200" v-if="treeType === 'normal'">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
<el-button type="primary" size="mini" @click="showHandleAdd(scope.row)">添加子类</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import MSDataTransfer from './dataTranslate.js'
export default {
name: 'tree-grid',
props: {
treeStructure: {
type: Boolean,
default: true
},
columns: {
type: Array,
default: () => []
},
dataSource: {
type: Array,
default: () => []
},
treeType: {
type: String,
default: 'normal'
},
defaultExpandAll: {
type: Boolean,
default: true
},
fixedHead: {
type: String,
default: ''
},
fixed: {
type: Boolean,
default: true
},
btnList: {
type: Array,
default: () => ([])
},
operatWidth: {
type: Number,
default: 300
}
},
data() {
return {}
},
computed: {
data() {
if (this.treeStructure) {
let data = MSDataTransfer.treeToArray(this.dataSource, null, null, this.defaultExpandAll)
return data
}
return this.dataSource
}
},
methods: {
showEditDialog(row) {
console.log(row)
alert("自己交互")
},
showHandleAdd(row) {
alert("自己交互")
console.log(row)
},
// -----------------------
showTr(rows, index) {
let row = rows.row
let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
row._show = show
return show ? '' : 'display:none;'
},
toggle(trIndex) {
let record = this.data[trIndex]
record._expanded = !record._expanded
},
spaceIconShow(index) {
if (this.treeStructure && index === 0) {
return true
}
return false
},
toggleIconShow(index, record) {
if (this.treeStructure && index === 0 && record.children && record.children.length > 0) {
return true
}
return false
},
firstWidth(index) {
if (index === 0) {
return '150'
} else {
return '100'
}
},
firstAlign(index) {
if (index === 0) {
return 'left'
} else {
return 'center'
}
}
}
}
</script>
<style scoped>
.table-box {
width: 100%;
height: 100%;
}
.header-box {
padding: 8px 0;
margin: 0;
text-align: center;
font-weight: bold;
}
.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
width: 18px;
height: 14px;
}
.ms-tree-space::before {
content: ""
}
table td {
line-height: 26px;
}
.button {
font-size: 20px;
cursor: pointer;
}
.firstWidth {
min-width: 150px;
}
.tree-table .el-table__body-wrapper {
overflow-y: auto;
}
.el-icon-circle-plus,
.el-icon-remove {
color: #409EFF;
}
</style>
所需要用到的页面
<template>
<div>
<table-tree :columns="columns" :tree-structure="true" :data-source="menuData" ></table-tree>
</div>
</template>
<script>
import tableTree from './tableTree'
export default {
data() {
return {
columns: [{
text: '名称',
dataIndex: 'event'
},
{
text: '编号',
dataIndex: 'id'
},
{
text: '条形码',
dataIndex: 'timeLine'
},
{
text: '是否需要价格',
dataIndex: 'comment'
},
{
text: '排序',
dataIndex: 'num1'
}
],
menuData: [
{
id: 0,
event: "事件1",
timeLine: 50,
comment: "否",
num1:60
},
{
id: 1,
event: "事件1",
timeLine: 100,
comment: "否",
num1:60,
children: [
{
id: 2,
event: "事件2",
timeLine: 10,
comment: "否",
num1:60
},
{
id: 3,
event: "事件3",
timeLine: 90,
comment: "否",
num1:60,
children: [
{
id: 4,
event: "事件4",
timeLine: 5,
comment: "否",
num1:60
},
{
id: 5,
event: "事件5",
timeLine: 10,
comment: "否",
num1:60
},
{
id: 6,
event: "事件6",
timeLine: 75,
comment: "否",
num1:60,
children: [
{
id: 7,
event: "事件7",
timeLine: 50,
comment: "否",
num1:60,
children: [
{
id: 71,
event: "事件71",
timeLine: 25,
comment: "xx",
num1:60
},
{
id: 72,
event: "事件72",
timeLine: 5,
comment: "xx",
num1:60
}
]
},
{
id: 8,
event: "事件8",
timeLine: 25,
comment: "否",
num1:60
}
]
}
]
}
]
}
],
}
},
components: {
tableTree
},
}
</script>
<style lang="less" scoped>
</style>