1、安装
npm install xe-utils@3 vxe-table@3
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
2、使用
html:
<vxe-table resizable
border
ref="xTable"
:tree-config="{transform: true, rowField: 'id', parentField: 'pid'}"
:data="tableData"
style="margin-top: 0.3rem">
<vxe-column field="name" title="名称" tree-node>
<template #default="{ row }">
<i v-if="row.children.length>0" class=" el-icon-folder"></i>
<i v-else class="el-icon-document"></i>
<span style="text-align: left">{{row.name}}</span>
</template>
</vxe-column>
<vxe-column field="funCode" title="系统编码"></vxe-column>
<vxe-column field="url" title="URL"></vxe-column>
<vxe-column field="funOrder" title="排序"></vxe-column>
<vxe-column field="address" title="类型" >
<template #default="{ row }">
<div class="userManagement_content_line">
<span>{{row.funType==0?'系统':row.funType==1?'菜单':row.funType==2?'菜单项':row.funType==3?'功能模块':""}}</span>
</div>
</template>
</vxe-column>
<vxe-column field="address" title="操作" width="500">
<template #default="{ row }">
<div class="userManagement_content_line2">
<i class="el-icon-s-tools" v-if="row.funType==2||row.funType==0||row.funType==1||row.funType==3" ">修改</i>
<i class="el-icon-delete" v-if="row.funType==2||row.funType==0||row.funType==1||row.funType==3" ">删除</i>
<i class="el-icon-plus" v-if="row.funType==0||row.funType==1" >增加子菜单</i>
<i class="el-icon-circle-plus-outline" v-if="row.funType==0||row.funType==1" >增加菜单项</i>
<i class="el-icon-plus" v-if="row.funType==2||row.funType==0||row.funType==1" >增加功能模块</i>
</div>
</template>
</vxe-column>
</vxe-table>
js:
data() {
return {
tableData: [{
id: "",
name: "",
funCode: "",
funType: 0,
funOrder: 0,
url: null,
pid: null,
sysCode: null,
optIds: null,
remark: "1234123",
openModel: null,
funIcon: null
}],
}
}