<template>
  <div class="table">
    <byTable :propConfig="config" ref="table" >
      <template v-slot:slotField='{ row }'>插槽：{{ row.name }}</template>
    </byTable>
    <el-button type="primary" @click="setData">设置数据</el-button>
    <el-button type="primary" @click="validate">表格验证</el-button>
    <el-button type="primary" @click="getSelect">获取选中数据</el-button>
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,ref  } from "vue";
  const { proxy } = getCurrentInstance();
  const config=ref({
    attr:{
      size:'mini',
      height:240,
      seq:true,
      align:'center',
      checkbox:true,
      editRules:{
        name:[
          //必填
          { required: true, message: '请输入姓名'}, 
          //自定义验证
          { 
            validator: (parames) => {  //表格验证提示信息
              if (parames.cellValue && !/^\w+$/.test(parames.cellValue)) {
                return new Error('名称格式不正确，必须字母或数字')
              } 
            },
            validatorHandle:(v) => { //判断验证是否通过
              if (v && !/^\w+$/.test(v)) {
                return false
              } else{
                return true
              }
            }
          }
        ]
      }
    },
    columns:[{
      title:'id',
      field:'id',
      width:50
    },
    {
      title:'姓名',
      field:'name',
      isDetail:true,
      width:100
    },
    {
      title:'日期',
      field:'time',
    },
    {
      title:'插槽',
      field:'slotField',
      slot:true
    },
    {
      title:'操作',
      action:true,
      plugins:[{
        icon:'el-icon-edit',
        name:'编辑',
        audit:'',
        event:{
          show:(item) => {
            //是否显示该按钮
            // console.log('该行数据：',item);
            return false
          },
          click:(item) => {
            console.log('该行数据：',item)
          }
        }
      },{
        name:'查看',
        event:{
          click:(item) => {
            console.log('该行数据：',item)
            this.fun();
            console.log('this:',this)
          }
        }
      }]
    }]
  })
  const table = ref()
  const data=ref([{
    id:1,
    name:'张三',
    time:'2023-04-07'
  },{
    id:2,
    name:'李四',
    time:'2023-04-08'
  },{
    id:3,
    name:'王五',
    time:'2023-04-09'
  }])

  const setData= () => {
    console.log(data.value,table.value,proxy.$refs.table.getValue)
    table.value.setValue(data.value);
  }
  const validate = () => {}
  const getSelect = () => {}

</script>
<style lang="scss" scoped>
.table{
  width: 100%;
  height: 100%;
}
</style>