前面和大家分享过自己封装的table了
这次和大家分享一个table的树 无限级的树 自己以前也看过网上写的树 都是里面带折叠的那种的 但是发现一个问题就是我新增了数据进入就会表格会重新渲染了 有点体验不是很好的感觉 然后还有就是样子也不太好看 我就想起了以前的学习ThinkPHP 里面分享了一个table的树 觉得挺不错的 我也想搞一个用前端的方式去写一个
一开始想去再去找找 (自己有点懒 哈哈哈)
效果大致的样子
这个是我以前看到的样子觉得挺不错的
来自己也实现一下
html部分
<template>
<div>
<comTable v-model="accessdata" :loading="loading">
<el-table-column min-width="200" label="权限名称" align="center">
<template slot-scope="scope">
<div style="width:100%;text-align: left;">
{{`${scope.row._type}${scope.row.AccessName}`}}
</div>
</template>
</el-table-column>
<el-table-column prop="AccessKey" min-width="200" label="关键字" align="center">
</el-table-column>
<el-table-column prop="AccessIcon" min-width="200" label="图标" align="center">
</el-table-column>
<el-table-column min-width="200" label="节点类型" align="center">
<template slot-scope="scope">
{{`${scope.row.AccessType == 1 ? '菜单' : '功能'}`}}
</template>
</el-table-column>
<el-table-column prop="AccessSort" min-width="200" label="排序" align="center">
</el-table-column>
<el-table-column prop="Remark" min-width="200" label="备注" align="center">
</el-table-column>
<el-table-column label="操作" width="250" align="center" fixed="right">
<template slot-scope="scope">
<Button type='primary' size='small' :disabled=" scope.row.AccessType == 1 ? (getPower('add') ? false : true) : true" style="margin-right:5px" @click="btnadd(scope)">
添加下级
</Button>
<Button type='success' size='small' :disabled="getPower('update') ? false : true" style="margin-right:5px" @click="btnupdate(scope)">
修改
</Button>
<Button :type="scope.row.Status == 1 ? 'warning' : 'info'" size='small' :disabled="getPower('update') ? false : true" style="margin-right:5px" @click="btnstop(scope)">
{{scope.row.Status == 1 ? '停用' : '启用'}}
</Button>
<Poptip confirm title="你确定要删除吗?" @on-ok="btndel(scope)" transfer>
<Button type='error' size='small' :disabled="getPower('del') ? false : true" style="margin-right:5px">删除</Button>
</Poptip>
</template>
</el-table-column>
</comTable>
</div>
</template>
复制代码
这个里面的comTable组件就是上次封装的table组件了
主要的数据处理部分
我们返回的数据是有父子关系的
class CommonWay {
/**
* description:对数组的分页处理
* author:
* date:
* @param {number} [pageNo=1] 页码
* @param {number} [pageSize=10] 每页显示条数
* @param {any} [obj=[]] 待分页的数组
* @param {Boolean} [iscreateNewdata=true] 是否创建新的数据
* @returns 返回新的数组
* @memberof CommonWay
*/
pagination(pageNo = 1, pageSize = 10, obj = [], iscreateNewdata = true) {
var array = [];
if (iscreateNewdata) {
array = JSON.parse(JSON.stringify(obj));
} else {
array = obj;
}
var offset = (pageNo - 1) * pageSize;
return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
}
/**
* 功能描述:获取树状table
* 创建时间:2018-09-21
* 创建者:xyw
* @param {*} [data=[]] 有父子级关系的数据
* @param {string} [pid='ParentId']
* @param {number} [def=0]
* @returns
* @memberof CommonWay
*/
TreeTable(data = [], pid = 'ParentId', def = 0) {
let Newdata = [];
data.map((item, index) => {
if (item[pid] == def) {
item._type = "";
} else if (item.children) {
item._type = this.GetNotbsp(item._level) + "─ ";
} else {
if (index == data.length - 1) {
item._type = this.GetNbsp(item._level) + " └─ ";
} else {
item._type = this.GetNotbsp(item._level) + "─ ";
}
}
Newdata.push(item);
if (item.children) {
Newdata.push(...this.TreeTable(item.children, pid, def));
}
})
return Newdata;
}
/**
* 功能描述:获取有子节点字符串
* 创建时间:2018-09-21
* 创建者:xyw
* @param {*} _level
* @returns
* @memberof CommonWay
*/
GetNotbsp(_level) {
let nb = '';
for (let index = 1; index < _level; index++) {
if (index == _level - 1) {
nb += ` ├`
} else {
nb += ` │`
}
}
return nb;
}
/**
* 功能描述:获取没有子节点字符串
* 创建时间:2018-09-21
* 创建者:xyw
* @param {*} _level
* @returns
* @memberof CommonWay
*/
GetNbsp(_level) {
let nb = '';
for (let index = 1; index < _level - 1; index++) {
nb += ` │`
}
return nb;
}
/**
* 功能描述:把数据处理成父子关系
* 创建时间:2018-09-21
* 创建者:xyw
* @param {*} data 数据
* @param {string} [id='id'] 主键键值
* @param {string} [pid='parentId'] 父级键值
* @returns
* @memberof CommonWay
*/
treeDataTranslate(data, id = 'id', pid = 'parentId') {
var res = []
var temp = {}
for (var i = 0; i < data.length; i++) {
temp[data[i][id]] = data[i]
}
for (var k = 0; k < data.length; k++) {
if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
if (!temp[data[k][pid]]['children']) {
temp[data[k][pid]]['children'] = []
}
if (!temp[data[k][pid]]['_level']) {
temp[data[k][pid]]['_level'] = 1
}
data[k]['_level'] = temp[data[k][pid]]._level + 1
temp[data[k][pid]]['children'].push(data[k])
} else {
res.push(data[k])
}
}
return res
}
}
export default CommonWay
复制代码
<script>
/**
功能描述:权限管理
创建时间:2018-09-18
创建者:xyw
*/
import comTable from '../common/comTable_new'
import { getTableData, Accessdel, Accessadd, Accessupdate, QueryTableData } from '../../api/system/access'
import commomway from '../../assets/js/commonway'
import Appmixin from '../AppMixin/'
export default {
name: "sysaccess",
mixins: [Appmixin],
data() {
return {
ModalLoading: false,
accessname: '',
accessmodal: false,
modaltitle: '',
action: '',
loading: false,//表格数据加载状态
switchdisabled: false,//是否禁用启用switch
formValidate: {
Id: 0,
AccessName: "",
AccessKey: "",
AccessIcon: "",
ParentId: 0,
AccessSort: 0,
AccessStatus: 1,
AccessType: 1,
ParentName: '',
},
ruleValidate: {
AccessSort: [
{ message: '只能是数字', trigger: 'change', pattern: /^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, }
],
AccessName: [
{ required: true, message: '请输入权限名称', trigger: 'blur' }
],
AccessKey: [
{ required: true, message: '请输入关键字', trigger: 'blur' },
]
},
menuList: [],
menuListTreeProps: {
label: 'AccessName',
children: 'children'
},
defaultCheckedKeys: [],
defaultExpandedKeys: [],
accessdata: []
};
},
components: {
comTable
},
created() {
this.loading = true;
this.init();
},
methods: {
init() {//页面加载初始数据
getTableData().then(re => {
if (re.data.status == 'ok') {
let comway = new commomway();
let { menuData, accessData } = { menuData: JSON.parse(JSON.stringify(re.data.data)), accessData: JSON.parse(JSON.stringify(re.data.data)) };
this.accessdata = comway.TreeTable(comway.treeDataTranslate(accessData, 'Id', 'ParentId'));
this.loading = false;
}
})
},
btnadd(params) {
this.$refs['formValidate'].resetFields();
this.formValidate = {
Id: 0,
AccessName: "",
AccessKey: "",
AccessIcon: "",
ParentId: params.row.Id,
AccessSort: 0,
AccessStatus: 1,
AccessType: 1,
ParentName: params.row.AccessName
}
this.switchdisabled = false;
this.accessmodal = true;
this.action = 'add';
this.modaltitle = '添加下级权限信息';
},
btnstop(params) {
params.row.AccessStatus = params.row.AccessStatus == 1 ? 2 : 1;
Accessupdate(params.row.Id, params.row).then(re => {
if (re.data.status == 'ok') {
this.init();
this.$Message.success((params.row.AccessStatus == 1 ? '启用' : '停用') + '成功!');
} else {
this.$Message.error((params.row.AccessStatus == 1 ? '启用' : '停用') + '失败!');
console.log(re.data.msg);
}
})
},
btnupdate(params) {
this.$refs['formValidate'].resetFields();
Object.keys(params.row).map(key => {
this.formValidate[key] = params.row[key];
})
this.accessmodal = true;
this.switchdisabled = false;
this.action = 'update';
this.modaltitle = '修改权限信息';
},
btndel(params) {
Accessdel(params.row.Id).then(re => {
if (re.data.status == 'ok') {
this.init();
this.$Message.success('删除成功!');
} else {
this.$Message.error('删除失败!');
console.log(re.data.msg);
}
})
},
menuListTreeCurrentChangeHandle(data, node) {
this.formValidate.ParentId = data.Id;
this.formValidate.ParentName = data.AccessName;
},
}
};
</script>
复制代码
emmm 就是这样的吧 有啥好的建议阔以提提 嘻嘻