vue项目+el-tree，树结构展示，非常完整的代码，包含调接口拿真实数据渲染

温故而知新，最近项目中频繁使用树形结构展示效果，因为不熟悉，备受折磨。
代码贴出来，再复习一次。
代码太长了，想看分析的可以搜我下一篇文章，下一篇会详细的写如何在项目中使用

效果：左侧是树，右侧是表格。点击任何一行都会展示对应的表格

**完整代码如下：**模板区

  <el-card ><div style="display: flex; justify-content: start"><div class="leftBox"><divv-for="(item, index) in buttonList":key="index"@click="num = index"style="float: left"><el-button class="buttonList" size="medium" @click="treeDataList('parent_id')">{{item.label}}</el-button></div><div class="treeclass"><!-- :default-expanded-keys(默认展开项)通过render-content方法定义树节点内容(js代码)node-key:设置选中节点对应的值default-expand-all:是否默认展开所有节点:default-checked-keys 设置默认选中项的数组ref:设置引用:load="loadChildData" （load 加载子树数据的方法，仅仅当lazy属性为true时生效） --><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><el-treeclass="treeitems":data="treeData"node-key="id":props="defaultProps"accordiondefault-expand-all:filter-node-method="filterNode"@node-click="handleNodeClick"ref="tree"><spanclass="custom-tree-node"slot-scope="{ node, data }"@mouseenter="mouseenter(data)"@mouseleave="mouseleave(data)"><span><span v-if="!node.isLeaf"><i class="folder-open" v-if="node.expanded"></i><i class="folder-close" v-else></i></span><i v-else class="el-icon-document"></i>{{ node.label }}</span><span class="span_icon"><span v-show="data.show" style="float: right"><imgsrc="@/assets/images/png"alt=""@click.stop="() => append(node, data)"/>&nbsp;&nbsp;&nbsp;&nbsp;<imgsrc="@/assets/images/png"alt=""@click.stop="() => appendChild(node, data)"/>&nbsp;&nbsp;&nbsp;&nbsp;<imgsrc="@/assets/images/png"alt=""@click.stop="() => editNode(node, data)"/>&nbsp;&nbsp;&nbsp;&nbsp;<imgsrc="@/assets/images/png"alt=""@click.stop="() => deleteNode(node, data)"/></span></span></span></el-tree></div></div><div class="rightBox"><el-table :data="tableData"><!-- <el-table-column type="index" label="序号" align="center"> </el-table-column> --><el-table-column type="index" label="序号" align="center" width="70"></el-table-column><el-table-column prop="" label="" align="center"></el-table-column><el-table-column prop="" label="" align="center"></el-table-column><el-table-column prop="cost_target" label="目标成本" align="center"></el-table-column><el-table-columnprop="cost_construction"label="建筑单方造价"align="center"></el-table-column><el-table-columnprop="cost_sellable"label="可售单方造价"align="center"></el-table-column><!-- <el-table-column prop="mark" label="备注" align="center"></el-table-column> --><el-table-column label="操作" align="center"><template slot-scope="scope"><!-- 表格查看 --><imgsrc="~/@/assets/images/"class="icon icon-deal"alt=""style="margin-right: 20px; color: #409eff"@click="reviewworkFile(scope.row)"/><!-- 表格编辑 --><imgsrc="~/@/assets/images/icon-update.png"alt=""class="icon icon-deal"style="margin-right: 20px; color: #409eff"@click="editworkFile(scope.row)"/><!-- 表格删除--><imgsrc="~/@/assets/images/png"alt=""class="icon icon-deal"style="color: #fe775c"@click="removeworkFile(scope.row.id)"/></template></el-table-column></el-table></div></div><!-- 添加树节点 --><el-dialog:title="addNodeForm.id ? '修改xx分类' : '添加xx分类'"center:visible.sync="nodeDialogVisible"width="30%":before-close="nodeClose"><span><el-form:model="addNodeForm":rules="addNodeFormRules"ref="addNodeRef"label-width="130px"><el-form-item label="关联项目：" prop="project_id"><el-selectclearablev-model="addNodeForm.project_id"placeholder="请选择项目"><el-optionv-for="item in projects":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="：" prop=""><el-input v-model=""></el-input></el-form-item><el-form-item label="" prop=""><el-input v-model.number="t"></el-input></el-form-item><el-form-item label="" prop=""><el-inputtype="textarea"v-model=""rows="3"></el-input></el-form-item></el-form></span><span slot="footer" class="dialog-footer"><el-button @click="nodeClose">取 消</el-button><el-button type="primary" @click="submitNode">确 定</el-button></span></el-dialog><!-- 添加表格 --><el-dialog:title="dialogTitle"center:visible.sync="tableDialogVisible"width="30%":before-close="tableClose"><span><el-form:model="addTableForm":rules="addTableFormRules"ref="addTableRef"label-width="130px"><el-form-item label="关联项目："><el-selectclearablev-model="addTableForm.project_id":disabled="inputFlag"placeholder="请选择项目"><el-optionv-for="item in projects":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="项目分类："><!--   label="title"   v-model="addTableForm.category_id"  --><treeselect:options="treeData":value='value':normalizer="normalizer"placeholder="请选择项目类型"/></el-form-item><el-form-item label="科目类型" prop="type"><el-selectv-model="addTableForm.type_text"placeholder="请选择"><el-optionv-for="item in typeSelect":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="" prop=""><el-input v-model.number=""  :disabled="inputFlag"><template slot="append">万元</template></el-input></el-form-item><el-form-item label=""><el-input v-model=""  :disabled="inputFlag"><template slot="append">万元</template></el-input></el-form-item><el-form-item label=""><el-input v-model.number=""  :disabled="inputFlag"><template slot="append">万元</template></el-input></el-form-item><el-form-item label="备注"><el-inputtype="textarea"v-model="":disabled="inputFlag"rows="3"></el-input></el-form-item></el-form></span><span slot="footer" class="dialog-footer" v-if="!inputFlag"><el-button @click="tableClose">取 消</el-button><el-button type="primary" @click="submitTable">确 定</el-button></span></el-dialog></el-card>

script

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {burgetAdd,burgetRemove,burgetUpdate,burgetFindProject,amountList,amountAdd,amountRemove,amountUpdate,amountFindProject,burgetSubject,burgetTree,
} from "@/api/burget";
import { list } from "@/api/user";
export default {name: "",components: { pages, Treeselect },props: {},data() {return {value:null,dialogTitle: "", //表格弹窗文本inputFlag: false, //查看表格的变量，隐藏取消和确认按钮，禁用弹窗nodeDialogVisible: false, //添加树弹窗tableDialogVisible: false, //添加表格弹窗filterText: "", //树过滤num: 0,projects: [], //多项目option绑的值cateprojects: [], //项目分类option绑的值typeSelect: [], //科目类型option绑的值activeName: "1",tableData: [], //表格数据源treeData: [], //权限树数据//添加节点表单addNodeForm: {parent_id: "",},// 添加表格表单addTableForm: {},//添加节点表单验证addNodeFormRules: {project_id: [{ required: true, message: "请选择项目", trigger: "blur" },],title: [{ required: true, message: "请输入标题", trigger: "blur" }],},// 添加表格验证addTableFormRules: {type: [{ required: true, message: "请输入物资名称", trigger: "blur" },],cost_target: [{ required: true, message: "请输入整数", trigger: "blur" },{ type: "number", message: "必须为数字值", trigger: "blur" },],},//查询项目projectQuery: {project_id: "",category_id: "",page: 1,size: 10,},//多项目数据projectForm: {page: 1,size: 10000,tltle: "",},query: {page: "",size: "",project_id: "",parent_id: "",},buttonList: [{ value: 1, label: "xx" },{ value: 2, label: "xx" },{ value: 3, label: "xx" },{ value: 4, label: "xx" },],// addform: {},defaultProps: {//树形控件的属性绑定对象children: "children", //设置通过children属性展示子节点信息label: "title", //通过label设置树形节点文本展示isLeaf: "leaf",},};},computed: {},watch: {filterText(val) {this.$refs.tree.filter(val);},},created() {this.treeDataList();this.moreProject();this.addProject();},mounted() {},methods: {//获取项目列表async moreProject() {try {const data = await list(this.projectForm);// console.log("列表", data);this.projectForm = data.data;this.projects = data.data.items.map((item) => {return {label: item.title,value: item.project_id,};});// window.localStorage.setItem('duoproject',JSON.stringify(this.projects))} catch (err) {console.log(err);}},// 添加数据弹窗里的科目类型async addProject() {const data = await burgetSubject(this.addTableForm);let obj = data.data;for (const key in obj) {this.typeSelect.push({value: key,label: obj[key],});}// console.log(this.typeSelect);},
normalizer(node){return{id:node.id,label:node.title,children:node.children,}
},handleCurrentChange() {},//获取左侧树async treeDataList(id) {try {const data = await burgetTree();this.treeData = data.data;// console.log("树数据", data.data);} catch (error) {console.log(error);}},//树过滤filterNode(value, data) {if (!value) return true;return data.title.indexOf(value) !== -1;},//树节点点击handleNodeClick(data, node) {// console.log("点击节点", data, node);this.projectQuery.category_id = node.key;this.getTableData();},// 树节点鼠标移入移出mouseenter(data) {this.$set(data, "show", true);},mouseleave(data) {this.$set(data, "show", false);},//添加同级节点append(node) {// console.log("1111111", node, data);this.nodeDialogVisible = true;this.addNodeForm.parent_id = node.parent.key;},// 添加子级节点appendChild(node) {this.nodeDialogVisible = true;this.treeDataList();this.addNodeForm.parent_id = node.key;},// 编辑节点async editNode(node) {const data = await burgetFindProject({ id: node.key });// console.log('树节点详情', data);if (data.code == 200) {this.addNodeForm = data.data;this.nodeDialogVisible = true;}},// 删除节点deleteNode(node) {this.$confirm("是否删除当前节点?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {burgetRemove({ id: node.key }).then((res) => {if (res.code == 200) {this.$message.success("删除成功");this.treeDataList();}});}).catch((err) => err);},//添加、修改节点提交submitNode() {this.$refs.addNodeRef.validate(async (valid) => {if (!valid) return;try {if (this.addNodeForm.id) {var data = await burgetUpdate(this.addNodeForm);} else {var data = await burgetAdd(this.addNodeForm);}// console.log('添加树', data);if (data.code == 200) {this.$message.success("操作成功");this.nodeDialogVisible = false;this.treeDataList();this.addNodeForm = { parent_id: "" };}} catch (error) {console.log(error);}});},//添加节点弹窗关闭nodeClose() {this.addNodeForm = { parent_id: "" };this.nodeDialogVisible = false;},//实现局部刷新，在点击弹窗处调用的partialRefreshpartialRefresh(node) {//设置loaded为false；模拟一次节点展开事件，加载重命名后的新数据；node.loaded = false;node.expand();//新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件，//可以设置node.parent.loaded = false;node.parent.expand();},//获取表格数据async getTableData() {try {// console.log('查询入参', this.projectQuery);const data = await amountList(this.projectQuery);// console.log("表", data);if (data.code == 200) {this.tableData = data.data.items;}} catch (error) {console.log(error);}},// 查看表格reviewworkFile(row) {this.dialogTitle = "查看xx";this.tableDialogVisible = true;this.addTableForm = row;this.inputFlag = true;},//  编辑表格editworkFile(row) {this.inputFlag = false;this.dialogTitle = "编辑xx";this.tableDialogVisible = true;this.addTableForm = JSON.parse(JSON.stringify(row)); //row当前行数据，把当前行的数据赋值给表单},//  添加表格addworkFile() {this.inputFlag = false;this.dialogTitle = "新增xx";this.tableDialogVisible = true;},//  删除表格async removeworkFile(id) {//弹出确定取消框，是否删除用户const confirmResult = await this.$confirm("是否要永久删除该条数据","删除提示",{confirmButtonText: "确认删除",cancelButtonText: "取消",type: "warning",}).catch((err) => err);//如果用户点击确认，则confirmResult 为'confirm'//如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'if (confirmResult != "confirm") {return this.$message.info("已经取消删除");}// console.log(id);const data = await amountRemove({ id });// console.log(data);if (data.code == 200) {this.$message.success("删除成功");this.treeDataList();this.getTableData();}},//添加表格弹窗关闭tableClose() {this.resetForm();this.tableDialogVisible = false;},// 添加修改弹窗确认事件async submitTable() {this.$refs.addTableRef.validate(async (valid) => {if (!valid) return;try {if (this.addTableForm.id) {var data = await amountUpdate(this.addTableForm);// console.log("xiugai", data);} else {var data = await amountAdd(this.addTableForm);// console.log("add", data);}// console.log('data出参',data);if (data.code == 200) {this.$message.success("操作成功");this.resetForm();this.tableDialogVisible = false;this.getTableData();}} catch (error) {console.log(error);}});},resetForm() {this.addTableForm = {type: "",cost_target: "",mark: "",};},},
};
</script>

样式的代码不贴了，写的有点乱，这个自己调试都可以调出来的

vue项目+el-tree，树结构展示，非常完整的代码，包含调接口拿真实数据渲染相关推荐

在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
Vue使用自定义指令实现按钮防抖功能，防止多次调接口
首先什么是防抖? 防抖就是指☞触发事件后在n秒内函数只执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间.说到防抖大家应该会想到节流,两者cp哈哈哈. 主要应用场景有: a.scroll事件 ...
在vue项目中千分位展示输入金额，获取金额千分位，金额大写的方法
实现效果: 在用户输入完成input失焦的时候,input文本框中显示的是千分位格式的金额:在用户再次聚焦的input文本框时,文本框中展示的是正常的金额值,用户可以修改金额,失焦的时候再次千分位展示 ...
vue项目视频实现键盘快进快退，音量调大小及监听播放事件
直接上代码 <div style="padding-top:56.25%" ><video style="width:100%;height:672px ...
vue项目打包之后放在服务器上测试的时候访问不到本地json数据的解决方法
上面的代码表示在本地开发项目时模拟后端数据.项目打包之后放在服务器上,json的路径需要按照原来的json实际路径放置才会访问到(/api/index.json)

vue项目+el-tree，树结构展示，非常完整的代码，包含调接口拿真实数据渲染

vue项目+el-tree，树结构展示，非常完整的代码，包含调接口拿真实数据渲染相关推荐

最新文章

热门文章