vxe-grid 高级表格

时间：2025-03-05 07:36:28

vxe-grid 高级表格基础版

  • vxe-grid 高级表格：一个包含表单、工具栏、基础表格、分页...等全功能的组件
  • 一、vxe-grid 入门使用
    • 基本的渲染
    • 展示序号
    • 展示多选框
    • 多选事件
    • 格式化日期
    • 使用插槽
      • link 的jsx写法 el-link underline={false}
    • 自定义插槽 操作列

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即可

代码实例

基本的渲染

 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>

相关文章