方法不是原著,多年前的,忘了用的哪位大神的,如有侵权,请大神联系我删除
element8.x版本以前是没有树形表格封装的 所以自己上网搜到方法改了一下,没想到11.多版本新增了树形表格。手动哭泣0.0…算是纪念一下吧
table-tree
<table-tree v-loading="loading" :columns="columns" :tree-structure="true" v-on:child-delect="listenToMyBoy" :data-source="menuData"></table-tree>
//table-tree 封装
<template>
<div class="fuData">
<el-table
:data="data"
:row-style="showTr">
<el-table-column v-for="(column, index) of columns" :key="column.dataIndex"
:label="column.text" align="left">
<template slot-scope="scope">
<div :class="index==0?'appk':''">
<span v-if="spaceIconShow(index)" v-for="(space, levelIndex) of scope.row._level" class="ms-tree-space" :key="levelIndex"></span>
<span v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
<i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>
<i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>
</span>
<span v-else-if="index===0" class="ms-tree-space"></span>
<el-tooltip class="item" effect="dark" :disabled="scope.row[column.tooltip]==null||undefined?true:false" :content="scope.row[column.tooltip] | timeData" placement="top">
<span>{{scope.row[column.dataIndex] | btnType}}</span>
<!--<span :style="index==0?'width:200px;display: block;':''">{{index}}</span>-->
</el-tooltip>
<el-tooltip class="item" effect="dark" :disabled="scope.row[column.tooltip]==null||undefined?true:false" :content="scope.row[column.tooltip] | timeData" placement="top">
<span>{{scope.row[column.textIndex] | textType}}</span>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="操作" v-if="treeType === 'normal'">
<template slot-scope="props">
<el-button type="primary" size="small" v-show="(props.row.children).length==0" plain @click="handleEdit(props.$index, props.row)">修改</el-button>
<!--<el-button type="danger" size="small" plain @click="handleDelete(props.$index, props.row)">删除</el-button>-->
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Utils from '../tree'
// import Vue from 'vue'
export default {
name: 'tree-grid',
props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了,如果是,则不需要进行树形格式化
treeStructure: {
type: Boolean,
default: function () {
return false
}
},
// 这是相应的字段展示
columns: {
type: Array,
default: function () {
return []
}
},
// 这是数据源
dataSource: {
type: Array,
default: function () {
return []
}
},
// 这个作用是根据自己需求来的,比如在操作中涉及相关按钮编辑,删除等,需要向服务端发送请求,则可以把url传过来
requestUrl: {
type: String,
default: function () {
return ''
}
},
// 这个是是否展示操作列
treeType: {
type: String,
default: function () {
return 'normal'
}
},
// 是否默认展开所有树
defaultExpandAll: {
type: Boolean,
default: function () {
return true
}
}
},
data () {
return {}
},
computed: {
// 格式化数据源
data: function () {
let me = this
if (me.treeStructure) {
let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)
return data
}
return me.dataSource
}
},
filters: {
btnType (value) {
return value
},
textType(value){
if(value==undefined){
return ""
}else{
return value*100+'%'
}
},
timeData(value){
if(typeof value=='string'){
if((value.search("00.00.00") != -1)==true){
var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(value)
return newDate[0]
}else{
return value
}
}else{
return value
}
}
},
methods: {
// 显示行
showTr(row, index) {
let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true)
row.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
},
//编辑
handleEdit(index, row){
this.$emit('child-delect',row);
},
//删除
handleDelete (index, row) {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
let data={
id:row.id
}
this.$http.post('expect/deleteExpect',data)
.then(res => {
if(res.data.code==0){
this.$message({
type: 'success',
message: '删除成功!'
})
this.$emit('child-delect',"删除成功");
}
})
.catch(error => {
console.log(error)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style scoped>
.appk{
width: 200px;
}
.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;
}
</style>