Question

示例一

>[info] 本示例演示了JVXETable的基本用法

<j-vxe-table
  ref="xTable"
  toolbar
  bordered
  row-number
  row-selection
  height="auto"
  :maxHeight="300"
  :columns="columns"
  :dataSource="dataSource"
  @valueChange="handleValueChange"
/>

示例二

>[info] 本示例演示了columns的基本用法

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)和插槽的参数介绍

<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]本示例演示了如何进行自定义函数校验

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}默认提示'
            }
        ]
    },
]