JVXETable使用入门介绍

<template>
  <a-card :bordered="false">
    <a-button @click="handleTableGet" type="primary" style="margin-bottom: 10px;">获取值</a-button>
    <a-button @click="handleTableCheck" style="margin-bottom: 10px;margin-left: 10px">表单验证</a-button>
    <j-vxe-table
      ref="xTable"
      toolbar
      bordered
      height="auto"
      :maxHeight="300"
      :columns="columns"
      :dataSource="dataSource"
      keep-source
      :pagination="pagination"
      @pageChange="handlePageChange"
      @edit-closed="handleEditClosed"
    >
      <template v-slot:action="props">
        <a-button type="danger" @click="handleDL(props)">
          删除
        </a-button>
      </template>
    </j-vxe-table>
  </a-card>
</template>

<script>
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import { getAction, postJson } from '../../api/manage'

  export default {
    name: 'List',
    data() {
      return {
        // 分页参数
        pagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50'],
          total: 1
        },
        columns: [
          {
            title: 'id',
            key: 'id',
            type: JVXETypes.hidden
          },
          {
            title: '用户名',
            key: 'usernme',
            type: JVXETypes.input,
            placeholder: '请输入${title}',
            allowClear: true,
            // 表单验证规则
            validateRules: [
              {
                required: true, // 必填
                message: '${title}不能为空' // 提示的文本
              }]
          },
          {
            title: '年龄',
            key: 'age',
            type: JVXETypes.inputNumber,
            placeholder: '请输入${title}',
            defaultValue: 18,
            allowClear: true,
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: 'JP-性别',
            key: 'sex',
            type: JVXETypes.select,
            dictCode: 'sex',
            // disabled: true,// 是否启用
            width: '100px',
            // 表单验证规则
            validateRules: [
              {
                required: true, // 必填
                message: '${title}不能为空' // 提示的文本
              }],
            // 允许清除选择（再点一次取消选择）
            allowClear: true
          },
          {
            title: '操作',
            key: 'action',
            type: JVXETypes.slot,
            fixed: 'right',
            minWidth: '100px',
            align: 'center',
            slotName: 'action'
          }
        ],//自定义列
        dataSource: []//数据
      }
    },
    created() {
      this.loadData(1)
    },
    mounted() {
    },
    methods: {
      /** 表单验证 */
      handleTableCheck() {
        this.$refs.xTable.validateTable().then(errMap => {
          if (errMap) {
            console.log('表单验证未通过：', { errMap })
            this.$message.error('验证未通过，请在控制台查看详细')
          } else {
            this.$message.success('验证通过')
          }
        })
      },
      /** 获取值，忽略表单验证 */
      handleTableGet() {
        const values = this.$refs.xTable.getTableData()
        console.log('获取值:', { values })
        this.$message.success('获取值成功，请看控制台输出')
      },
      // 分页
      handlePageChange(event) {
        // 重新赋值
        this.pagination.current = event.current
        this.pagination.pageSize = event.pageSize
        // 查询数据
        this.loadData()
      },
      loadData(arg) {
        if (arg == 1) {
          this.pagination.current = 1
        }
        let param = {}
        param.pageNo = this.pagination.current
        param.pageSize = this.pagination.pageSize
        getAction('/test/studyTest/list', param).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.pagination.total = res.result.total
          }
        })
      },
      handleDL(props) {
        // 调用删除方法
        props.target.removeRows(props.row)
      },
      // 行及时保存
      handleEditClosed(event) {
        let { $table, row, column } = event
        let field = column.property
        let cellValue = row[field]
        // 判断单元格值是否被修改
        delete row.action
        /**
         * $table.isUpdateByRow(row, field)
         * 判断当前行是否是已经存在的数据，并修改
         */
        $table.validate(row).then((errMap) => {
          // 校验通过
          if (!errMap) {
            if (row.hasOwnProperty('id')) {
              postJson('/test/studyTest/add', JSON.stringify(row), 'post').then((res) => {
                if (res.success) {
                  this.loadData()
                }
              })
            } else {
              postJson('/test/studyTest/edit', JSON.stringify(row), 'put').then((res) => {
                if (res.success) {
                  // 局部更新单元格为已保存状态
                  $table.reloadRow(row, null, field)
                }
              })
            }
          }
        }).catch(err => {
        })
      }
    }
  }
</script>

<style scoped>

</style>