vue中的 vxe-table表格插件 实现树形数据表
一个 PC 端表格组件,大数据表格vue vxe-table表格vue vxe-table表格2022-01-20 11:51·前端开发可以自定义选择引入的模块,减少项目的体积;多主题,多...
·
一个 PC 端表格组件,大数据表格
vue vxe-table表格
vue vxe-table表格
2022-01-20 11:51·前端开发
可以自定义选择引入的模块,减少项目的体积;
多主题,多图标;
表格种类繁多;
扩展插件库;
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
虽然不知道有什么用,但还是非常感谢码云的认可
功能点
基础表格
高级表格
斑马线条纹
多种边框
单元格样式
列宽拖动
最大高度
自适应宽高
固定列
多级表头
表尾数据
高亮行、列
序号
单选框
复选框
下拉选项
开关
排序
筛选
合并行或列
导入
导出
打印
显示/隐藏列
加载中
格式化内容
自定义插槽/模板
快捷菜单
展开行
分页
表单
工具栏
虚拟列表
增删改查
树表格
数据校验
数据代理
键盘导航
模态窗口
渲染器
虚拟滚动
vxe-table 官网地址
例子
可以使用 <vxe-column …> 或者 <vxe-table-column …> 定义列信息,两种方式都能使用
<template>
<div>
<vxe-table :data="tableData">
<vxe-column type="index" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{
id: 10001,
name: 'test1',
sex: 'Man',
date: '2019-05-01',
address: 'address abc123'
}
]
}
}
}
</script>
安装vxe-table
npm install xe-utils vxe-table
在main.js中引入vxe-table
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/index.css';
Vue.use(VXETable);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
因为是全局全量引入,所以可以直接在页面调用
<template>
<div>
<vxe-table border="inner" :data="tableData">
<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="sex" title="性别"></vxe-table-column>
<vxe-table-column field="address" title="籍贯"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
tableData: [
{
id: 10001,
name: "张三",
sex: "男",
address: "上海市"
},
{
id: 10002,
name: "李四",
sex: "女",
address: "北京市"
},
{
id: 10003,
name: "王五",
sex: "男",
address: "天津市"
}
]
};
}
};
</script>
运行效果
树形数据表
<template>
<div>
<vxe-table
border
row-id="id"
:data="tableData"
:tree-config="{ children: 'children', expandAll: true }"
>
<vxe-table-column
type="seq"
width="180"
title="序号"
tree-node
></vxe-table-column>
<vxe-table-column field="name" title="导航名称"></vxe-table-column>
<vxe-table-column field="url" title="URL"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
seq: 1,
name: "系统管理",
url: "",
children: [
{
seq: 10,
name: "用户管理",
url: "sys/user"
},
{
seq: 11,
name: "权限管理",
url: "sys/right"
},
{
seq: 12,
name: "角色管理",
url: "sys/role"
}
]
},
{
seq: 2,
name: "报表管理",
url: "report"
}
]
};
}
};
</script>
效果如下
更多推荐
已为社区贡献10条内容
所有评论(0)