JVxeTable 组件配置文档

JVxeTable 组件配置文档

<template>
  <j-vxe-table
    ref="vTable"
    toolbar
    row-number
    row-selection
    keep-source
    :height="484"
    :loading="loading"
    :dataSource="dataSource"
    :columns="columns"
    :pagination="pagination"
    style="margin-top: 8px;"
    @pageChange="handlePageChange"
  >

    <template v-slot:toolbarSuffix>
      <a-button @click="handleTableGet">获取值</a-button>
    </template>

  </j-vxe-table>
</template>

<script>
  import moment from 'moment'
  import { randomNumber, randomUUID } from '@/utils/util'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'

  export default {
    name: 'JVxeDemo2',
    data() {
      return {
        loading: false,
        columns: [
          {
            title: '下拉框_字典表搜索',
            key: 'select_dict_search',
            type: JVXETypes.selectDictSearch,
            width: '200px',
            // 【字典表配置信息】：数据库表名,显示字段名,存储字段名
            dict: 'sys_user,realname,username',
          },
          {
            title: 'JPopup',
            key: 'popup',
            type: JVXETypes.popup,
            width: '180px',
            popupCode: 'demo',
            field: 'name,sex,age',
            orgFields: 'name,sex,age',
            destFields: 'popup,popup_sex,popup_age'
          },
          {
            title: 'JP-性别',
            key: 'popup_sex',
            type: JVXETypes.select,
            dictCode: 'sex',
            disabled: true,
            width: '100px',
          },
          {
            title: 'JP-年龄',
            key: 'popup_age',
            type: JVXETypes.normal,
            width: '80px',
          },
          {
            title: '进度条',
            key: 'progress',
            type: JVXETypes.progress,
            minWidth: '120px'
          },
          {
            title: '单选',
            key: 'radio',
            type: JVXETypes.radio,
            width: '130px',
            options: [
              {text: '男', value: '1'},
              {text: '女', value: '2'},
            ],
            // 允许清除选择（再点一次取消选择）
            allowClear: true
          },
          {
            title: '上传',
            key: 'upload',
            type: JVXETypes.upload,
            width: '180px',
            btnText: '点击上传',
            token: true,
            responseName: 'message',
            action: window._CONFIG['domianURL'] + '/sys/common/upload'
          },
          {
            title: '图片上传',
            key: 'image',
            type: JVXETypes.image,
            width: '180px',
            token: true,
          },
          {
            title: '文件上传',
            key: 'file',
            type: JVXETypes.file,
            width: '180px',
            token: true,
          },
        ],
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '100', '200'],
          total: 1000,
        },
      }

    },

    created() {
      this.randomPage(this.pagination.current, this.pagination.pageSize, true)
    },
    methods: {

      // 当分页参数变化时触发的事件
      handlePageChange(event) {
        // 重新赋值
        this.pagination.current = event.current
        this.pagination.pageSize = event.pageSize
        // 查询数据
        this.randomPage(event.current, event.pageSize, true)
      },

      /** 获取值，忽略表单验证 */
      handleTableGet() {
        const values = this.$refs.vTable.getTableData()
        console.log('获取值:', {values})
        this.$message.success('获取值成功，请看控制台输出')
      },

      /* 随机生成数据 */
      randomPage(current, pageSize, loading = false) {
        if (loading) {
          this.loading = true
        }

        let randomDatetime = () => {
          let time = randomNumber(1000, 9999999999999)
          return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
        }

        let limit = (current - 1) * pageSize

        let begin = Date.now()
        let values = []
        for (let i = 0; i < pageSize; i++) {
          let radio = randomNumber(0, 2)
          values.push({
            id: randomUUID(),
            select_dict_search: ['', 'admin', '', 'jeecg', ''][randomNumber(0, 4)],
            progress: randomNumber(0, 100),
            radio: radio ? radio.toString() : null
          })
        }

        this.dataSource = values
        let end = Date.now()
        let diff = end - begin

        if (loading && diff < pageSize) {
          setTimeout(() => {
            this.loading = false
          }, pageSize - diff)
        }

      }
    }
  }
</script>

<style scoped>

</style>