您现在的位置是:首页 > Javascript
当前栏目
vxe-grid 高级表格
2023-03-31 10:41:15 时间
vxe-grid 高级表格基础版
vxe-grid 高级表格:一个包含表单、工具栏、基础表格、分页…等全功能的组件
提示:以下是本篇文章正文内容,下面案例可供参考
一、vxe-grid 入门使用
<vxe-grid v-bind="mixinGridOptions"></vxe-grid>
重点在于数据
data(){
return {
mixinGridOptions: {
stripe:true,
border: 'none',
resizable: false,
showOverflow: true,
align: 'center',
columns: [], // 这里自定义或者跟后端约定
data: [] // 这里赋值表格的数据
}
}
}
mixinGridOptions
被我放到mixins
里 只需要关注 columns
即可
代码实例
基本的渲染
mixinGridOptions.columns
columns: [
{ field: 'operateTypeStr', title: '操作类型' },
{ field: 'userName', title: '操作人用户名' },
{ field: 'fullName', title: '操作人姓名' },
{ field: 'tenantCnName', title: '所在组织' },
{ field: 'ip', title: 'IP地址' },
{ field: 'action', title: '事件' }
]
展示序号
{ type: 'seq', title: '序号', width: 70 }
展示多选框
{ type: 'checkbox', width: 50 }
多选事件
ref=“xGrid”
@checkbox-change=“checkboxChangeEvent”
@checkbox-all=“checkboxChangeEvent”
<vxe-grid ref="xGrid" v-bind="mixinGridOptions" @checkbox-change="checkboxChangeEvent"
@checkbox-all="checkboxChangeEvent">
// xGrid 全选
checkboxChangeEvent () {
const $grid = this.$refs.xGrid;
this.isAllChecked = $grid.isAllCheckboxChecked(); // 用于 type=checkbox,判断列头复选框是否被选中
this.isIndeterminate = $grid.isAllCheckboxIndeterminate(); // 用于 type=checkbox,判断复选行数据是否半选
this.multipleTable = $grid.getCheckboxRecords();
}
// 选中手动清空
clearCheckboxRow(name){
typeof name === 'undefined' ? name = 'table' : name;
const records = this.$refs[name].clearCheckboxRow(); // 用于 type=checkbox,手动清空用户的选择
this.multipleTable = records;
}
格式化日期
{
field: 'operateTime', title: '操作时间',
formatter: ({ cellValue }) => {
return cellValue ? moment(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
}
}
使用插槽
link 的jsx写法 el-link underline={false}
以前是 :underline="false"
现在是 underline={false}
{
field: 'fullName', title: '姓名',
slots: {
default: ({ row }) => {
if (this.readOnly) {
return <el-link underline={false} type="primary" onClick={() => this.moduleDialog(row)}>{row.fullName}</el-link>
} else {
return row.fullName
}
}
}
},
自定义插槽 操作列
{
title: '操作',
slots: {
default: 'operationButtons',
}
}
<vxe-grid ref="xGrid" v-bind="mixinGridOptions">
<template #operationButtons="{ row }">
<span>编辑</span>
</template>
</vxe-grid>
相关文章
- Ceph分布式存储实战1.2 Ceph的功能组件
- 深入理解Spark:核心思想与源码分析. 3.15 小结
- Java RESTful Web Service实战(第2版) 1.1 解读REST
- Java RESTful Web Service实战(第2版) 1.2 解读REST服务
- Java RESTful Web Service实战(第2版) 1.3 解读JAX-RS标准
- Java RESTful Web Service实战(第2版) 2.1 统一接口
- Java RESTful Web Service实战(第2版) 2.5 处理响应
- 一个可以把web表单变成会话形式的开源框架
- javascript之DOM技术(一)
- javascript之DOM技术(一)
- 解析XML字符串
- 运维前线:一线运维专家的运维方法、技巧与实践1.5 运维自动化的方法论
- javascript事件模型框架
- javascript之DOM技术(二)
- 大数据浪潮下,前端工程师眼中的完整数据链图
- 物联网设备安全1.2 使用网站接口控制照明
- jQuery使用手册(收藏)
- HTML5的你应该记住的一些知识点
- JavaScript原型链和instanceof运算符的暧昧关系
- JavaScript中getter/setter的实现