jeecg的JEditableTable可编辑表格组件使用

代码

<template>
  <div>
    {{ msg }}
    <j-editable-table :actionButton="true" :columns="columns" :dataSource="dataSource" />
     <div>
     value:{{value}}
     </div>
  </div>
</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:'性别',
               key:"gender",
               type:FormTypes.select,
               placeholder:"请选择性别",
               options:[
               {text:'男',value:'1'},
               {text:'女',value:'2'}
               ]
          },
          {
            title:'年龄',
             key:"age",
             type:FormTypes.inputNumber,
             placeholder:"请输入年龄"
          },
          {
            title:'是否在校',
             key:"isSchool",
             width:"120px",
             type:FormTypes.checkbox,
             defaultChecked:true
          },
          {
            title:'开学时间',
             key:"date",
             width:"120px",
             type:FormTypes.date
          }
         
          ],
          dataSource:[]
       }
    },
    methods:{
      hello () {
        var url = "/test/jeecgDemo/hello"
        getAction(url).then((res) => {
          if (res.success) {
            this.msg = res.result;
          }
        })
      }
    },
    created(){
      this.hello();
    }
  }
</script>

效果如下