jeecg-boot JEditableTable Demo

Demo.vue

<template>
    <a-card :bordered="false" style="min-height: 300px">

      <a-button @click="handleClickGetValue">点击获取数据</a-button>

        <j-editable-table
          ref="table1"
          :actionButton="true"
          :columns="columns"
          :dataSource="dataSource"
          :rowNumber="true"
          :rowSelection="true"
        >

          <template v-slot:action="props">
            <a @click="handleDelete(props)">删除</a>
          </template>

        </j-editable-table>

    </a-card>
</template>

<script>
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import JEditableTable from '@/components/jeecg/JEditableTable'

  export default {
    name: 'Demo',
    components: { JEditableTable },
    data() {
      return {
        columns: [
          {
            title: '姓名',
            key: 'name',
            type: FormTypes.input,
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [
              {
                required: true, // 必填
                message: '${title}不能为空' // 提示的文本
              },
              {
                pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
                message: '${title}必须以字母开头，可包含数字、下划线、横杠'
              }
            ]
          },
          {
            title: '性别',
            key: 'gender',
            type: FormTypes.select,
            placeholder: '请选择${title}',
            options: [
              { title: '男', value: '1' },
              { title: '女', value: '2' }
            ]
          },
          {
            title: '年龄',
            key: 'age',
            type: FormTypes.inputNumber,
            placeholder: '请选择${title}',
            defaultValue: ''
          },
          {
            title: '是否在校',
            key: 'isSchool',
            width: '120px',
            type: FormTypes.checkbox,
            defaultChecked: true
          },
          {
            title: '开学时间',
            key: 'date',
            type: FormTypes.date
          },
          {
            title: '一寸照',
            key: 'upload',
            type: FormTypes.upload,
            token: true,
            action: window._CONFIG['domianURL'] + '/sys/common/upload',
            responseName: 'message'
          },
          {
            title: '操作',
            key: 'action',
            type: FormTypes.slot,
            slot: 'action' // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
          }
        ],
        dataSource: []
      }
    },
    methods: {
      handleClickGetValue() {
        let values = this.$refs.table1.getValuesSync()
        console.log('获取到的值：',values)
      },

      handleDelete(props) {
        // 使用实例：删除当前操作的行
        let { rowId, target } = props
        target.removeRows(rowId)
      }
    }
  }
</script>

<style scoped>

</style>