<template>
  <dm-table :optOptions="optOptions" :columns="columns" :data="tableData" :propComponents="components"></dm-table>
</template>
<script>
import dmTable from '../component/dm-table/index.vue';
import testCom from './test-com';
export default {
  name:'dm-table-com',
  components:{
    'dm-table':dmTable,
    'testCom':testCom
  },
  data() {
    return {
      components:[testCom],
      optOptions: {
          inline: true,
          submitBtnText: 'Search',
          forms: [
            { prop: 'name', label: 'Name' },
            { prop: 'mobile', label: 'Mobile' },
            { prop: 'sex', label: 'Sex', itemType: 'select',
              options: [
                { value: '', label: 'All' },
                { value: 0, label: 'Male' },
                { value: 1, label: 'Female' }
              ]
            }
          ]
        },
        columns: [
          { prop: 'name', label: '姓名', width: 140 },
          { prop: 'mobile', label: '手机号码', minWidth: 180,
            render: (row) => {
              return '<div>12121</div>';
            }
          },
          { prop: 'sex', label: '性别', width: 100,
            render: (h, params) => {
              return h('el-button', {
                  props: {
                      type: 'primary',
                      size: 'small'
                  },
                  style: {
                      marginRight: '5px'
                  },
                  on: {
                      click: () => {
                          this.show(params.index)
                      }
                  }
              }, 'View')
            }
          }
        ],
        tableData: [
          { name: 'Sam', mobile: '15299xxxx', sex: 0 },
          { name: 'Jean', mobile: '13452xxxx', sex: 1 },
          { name: 'Tony', mobile: '187233xxxx', sex: 0 }
        ]
    }
  }
}
</script>
