# JVXETable 使用示例 [TOC=2,9] ## 示例一 >[info] 本示例演示了`JVXETable`的基本用法 ``` html <j-vxe-table ref="xTable" toolbar bordered row-number row-selection height="auto" :maxHeight="300" :columns="columns" :dataSource="dataSource" @valueChange="handleValueChange" /> ``` ## 示例二 >[info] 本示例演示了`columns`的基本用法 ``` js import { JVXETypes } from '@/components/jeecg/JVxeTable' /*--- 忽略部分代码片断 ---*/ columns: [ { title: '名称', key: 'name', type: JVXETypes.input, placeholder: '请输入${title}', defaultValue: '称名', // 表单验证规则 validateRules: [ { required: true, // 必填 message: '${title}不能为空' // 提示的文本 }, { pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则 message: '${title}必须以字母开头,可包含数字、下划线、横杠' } ] }, { title: '年龄', key: 'age', type: JVXETypes.inputNumber, placeholder: '请输入${title}', defaultValue: 18, validateRules: [{required: true, message: '${title}不能为空'}] } ] /*--- 忽略部分代码片断 ---*/ ``` ## 示例三 >[info]本示例演示了如何进行`表单验证`和`获取数据` ``` // 进行表单验证 this.$refs.xTable.validateTable().then(errMap => { if (!errMap) { this.$message.success('验证通过') // 获取数据 let tableData = this.$refs.xTable.getTableData() let deleteData = this.$refs.xTable.getDeleteData() // 将通过后的数组提交到后台或自行进行其他处理 console.log({tableData , deleteData }) } else { // 验证未通过,errMap里包含具体未验证通过的详情 this.$message.error('验证未通过') } }) ``` ## 示例四 >[info]本示例演示了如何使用`插槽(slot)`和插槽的参数介绍 ``` html <template> <j-vxe-table :columns="columns" :dataSource="dataSource"> <!-- 定义插槽 --> <!-- 这种定义插槽的写法是vue推荐的新版写法(https://cn.vuejs.org/v2/guide/components-slots.html#具名插槽),旧版已被废弃的写法不再支持 --> <!-- 若webstorm这样写报错,请看这篇文章:https://blog.csdn.net/lxq_9532/article/details/81870651 --> <template v-slot:action="props"> <a @click="handleView(props)">查看</a> <a-divider type="vertical"/> <a-popconfirm title="确定删除吗?" @confirm="handleDelete(props)"> <a>删除</a> </a-popconfirm> </template> </j-vxe-table> </template> <script> import { JVXETypes } from '@/components/jeecg/JVxeTable' export default { data() { return { columns: [ // ... { title: '操作', key: 'action', width: '100px', // 固定在右侧 fixed: 'right', // 对齐方式为居中 align: 'center', // 组件类型定义为【插槽】 type: JVXETypes.slot, // slot 的名称,对应 v-slot 冒号后面和等号前面的内容 slotName: 'action' } ] } }, methods: { handleView(props) { // 参数介绍: // props.value 当前单元格的值 // props.row 当前行的数据 // props.rowId 当前行ID // props.rowIndex 当前行下标 // props.column 当前列的配置 // props.columnIndex 当前列下标 // props.$table vxe实例,可以调用vxe内置方法 // props.target JVXE实例,可以调用JVXE内置方法 // props.caseId JVXE实例唯一ID // props.scrolling 是否正在滚动 // props.triggerChange 触发change事件,用于更改slot的值 console.log("props: ", props) }, handleDelete(props) { // 使用实例:删除当前操作的行 props.target.removeRows(props.row) } } } </script> ``` ## 示例五 >[info]本示例演示了如何进行`自定义函数校验` ``` js columns: [ { title: '字段名称', key: 'dbFieldName', type: JVXETypes.input, validateRules: [ { // 自定义函数校验 handler handler({ cellValue, row, column }, callback, target) { // cellValue 当前校验的值 // row 当前行数据 // column 当前列配置 // callback(flag, message) 方法【必须执行】且只能执行一次。 // flag = 是否通过了校验,不填写或者填写 null 代表不进行任何操作 // message = 提示的类型,默认使用配置的 message // target 行编辑的实例对象 // 示例: if (cellValue === 'abc') { callback(false, '${title}不能是abc') // false = 未通过,可以跟自定义提示 } else { callback(true) // true = 通过验证 } }, message: '${title}默认提示' } ] }, ] ```