vue3.0树形表格插件vue-table-with-tree-grid（vue.2.0）替换 vxe-table（vue3.0）

由于看黑马，视频，那个vue-table-with-tree-grid在vue3 不能用，所以用这个替换下
vxe-table官网 https://vxetable.cn/#/table/start/install
查看 gitee https://gitee.com/xuliangzhan_admin/vxe-table
查github https://gitcode.net/mirrors/xuliangzhan/vxe-table?utm_source=csdn_github_accelerator

<template><div><!--面包屑导航区域--><el-breadcrumb><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>商品分类</el-breadcrumb-item></el-breadcrumb><!--卡片视图区域--><el-card><el-row><el-col :span="2"><el-button type="primary" style="margin-bottom: 6px ">添加分类</el-button></el-col></el-row><vxe-tableresizableborderref="xTree":tree-config="{children: 'children'}":edit-config="{trigger: 'click', mode: 'row'}":checkbox-config="{labelField: 'id'}":data="catelist"><!--          borderloadingrow-id="id":data="catelist":tree-config="{ children: 'children', expandAll: true }">--><vxe-table-columntype="seq"width="180"title="序号"tree-node></vxe-table-column><vxe-table-column field="cat_name" title="分类名称"></vxe-table-column><vxe-table-column field="cat_deleted" title="是否有效"><template v-slot="scope"><el-icon v-if="scope.row.cat_deleted===true" style="color: lightgreen"><CircleCheck/></el-icon><el-icon v-else style="color: lightcoral"><CircleClose/></el-icon></template></vxe-table-column><vxe-table-column field="cat_level" title="排序"><template v-slot="scope"><el-tag v-if="scope.row.cat_level===0">一级</el-tag><el-tag v-else-if="scope.row.cat_level===1" type="success">二级</el-tag><el-tag v-else type="warning">三级</el-tag></template></vxe-table-column><vxe-table-column title="操作"><template v-slot="scope"><el-button type="primary" size="small" :icon="Edit">编辑</el-button><el-button type="danger" size="small" :icon="Delete">删除</el-button></template></vxe-table-column></vxe-table><vxe-pageralign="center"size="mini"backgroundv-model:page-size="queryInfo.pageSize"v-model:current-page="queryInfo.pagenum":total="total":layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"  @page-change="handlePageChange" ></vxe-pager></el-card></div>
</template><script>
import httpClient from "@/network/HttpClient";
import {Search, Edit, Delete, Setting} from "@element-plus/icons";
import {reactive} from "vue";export default {name: "categories",data() {return {Search: Search,Edit: Edit,Delete: Delete,defaultProps: {children: 'children',label: 'cat_name',},//查询条件queryInfo:reactive( {type:3,pagenum:1,pagesize:10}),//商品分类列表，默认为空catelist: [],/* 总数数据条数*/total: 0,columns: []}},created() {this.getCateList();},methods: {//处理分页handlePageChange({ currentPage, pageSize }) {this.queryInfo.pagenum = currentPage;this.queryInfo.pagesize = pageSize;this.getCateList()//调用列表},//获取商品分类列表getCateList() {httpClient.getTwo("categories/", this.queryInfo).then(res => {if (res.meta.status != 200) {return this.$message.error("获取失败")} else {console.log(res);this.catelist = res.data.result;this.total = res.data.total;}})},}
}
</script><style scoped></style>

vue3.0树形表格插件vue-table-with-tree-grid（vue.2.0）替换 vxe-table（vue3.0）相关推荐

DataTables TreeGrid 插件可以快速实现树形表格
dataTables.treeGrid 插件介绍更新日志真实系统展现效果 DEMO参考使用方法 DataTable 渲染JSON数据格式 HTML数据格式(以DEMO截图代码为例) 插件介绍针 ...
vue横向树结构_基于vue.js实现树形表格的封装
基于vue.js实现树形表格的封装(vue-tree-table) 前言由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度.google找了一通,并没有发现很靠谱的,也不是很灵活.所 ...
vue中的 vxe-table表格插件实现树形数据表
一个 PC 端表格组件,大数据表格 vue vxe-table表格 vue vxe-table表格 2022-01-20 11:51·前端开发可以自定义选择引入的模块,减少项目的体积: 多主题,多图 ...
vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table，treeTable
该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install ...
推荐一款简单易懂的VUE导出Tbale导出excel表格插件[ Table-excel ]
1.插件地址将前端 table 导出 excel , 基于 exceljs + file-saver , 适用于所有表格基于数据源的定制化导出具大佬所说,是公司给俩星期开发时间开发出来的导出插 ...
vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...
开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...

vue3.0树形表格插件vue-table-with-tree-grid（vue.2.0）替换 vxe-table（vue3.0）

vue3.0树形表格插件vue-table-with-tree-grid（vue.2.0）替换 vxe-table（vue3.0）相关推荐

最新文章

热门文章