#### Table 表格带查询
查询仅对接API接口使用。
:::demo
``` html
<template>
  <div>
    <mg-table ref='tableRef' :column="optionsTable.col" :api="optionsTable.api" :params="optionsTable.params" :search-config='optionsTable.searchConfig' :index='true' :expand='true'  align='left'  >
      <template slot='tableHead' >
        <mg-table-head :column='optionsTable.col' @setcolumn='setcolumn' :table-head='optionsTable.tableHead'>
          <div slot='title'></div>
        </mg-table-head>
      </template>
      <template slot='searchBtns' >
        <el-button type="primary"  @click="">添加</el-button>
      </template>
      <template slot='name' slot-scope='scope'>
        <span>{{scope.row.name}}</span>
      </template>
      <template slot='expand' slot-scope='scope'>
        <span>{{scope.row}}</span>ffff
      </template>
      <div slot-scope="scope">
        <span class='operation cursor cblue px20  mr20' @click="add(scope.row)"> 添加</span>
        <el-dropdown>
          <span class="el-dropdown-link operation cursor px10 ">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span class='cursor cblue pr10' @click="edit(scope.row)"> 修改</span></el-dropdown-item>
            <el-dropdown-item><span class='cursor cblue pr10' @click="remove(scope.row)"> 删除</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </mg-table>
  </div>
</template>
<script>
  import tableHead from "@/components/tableHead/tableHead.vue";
export default {
  components:{tableHead},
  data () {
    return {
      optionsTable: {
        tableHead:{
          title:'表格列表',
          item:[
            {
              type:'search', //搜索类型
              icon:'el-icon-search',
              label:'角色',
              done:this.search
            },
            {
              type:'icon',
              icon:'el-icon-delete',
              done:this.remove
            },
            {
              type:'icon', //图标类型
              icon:'el-icon-s-tools',
              done:this.screening
            },
            {
              type:'icon',
              icon:'el-icon-refresh-right',
              done:this.refresh
            },
            {
              type:'column',
              icon:'el-icon-menu',
            },
            {
              type:'button', //按钮类型
              icon:'el-icon-plus',
              name:'添加',
              done:this.add
            }
          ]
        },
        api: getRoleList,
        searchConfig: [
          {
            type: 'input',
            label: '角色名称',
            prop: 'keyword',
            attrs: {
              clearable: true
            }
          },
          {
            type: 'select',
            label: '状态',
            prop: 'status',
          }
        ],
        params: {
        },
        col: [
          {
            label: '角色名称',
            prop: 'name',
            template:true
          },
          {
            label: '权限字符',
            prop: 'sourceIdentifier'
          },
          {
            label: '角色状态',
            prop: 'status',
            enum: 'statusData'
          }
        ]
      }
    }
  },
  methods:{
    remove(item){
      let ids = this.$refs.tableRef.getSelect()
      debugger
    },
    search(item){
      this.$refs.tableRef.search.keyWord = item
      this.$refs.tableRef.search.keyword = item
       this.$refs.tableRef.getTable()
      // debugger
    },
    refresh(item){
       this.$refs.tableRef.getTable()
      // debugger
    },
    add(item){
      this.$refs.tableRef.getTable()
      // debugger
    },
    //是否显示筛选
    screening(item){
      this.$refs.tableRef.isSearch = !this.$refs.tableRef.isSearch
    },
    hideFun(){
      return false
    },
    //选择显示列
    setcolumn(data){
      console.log(data,998)
      this.$set(this.optionsTable,'col',data)
      // this.optionsTable.col=data
      // this.$refs.tableRef.getTable()
    }
  }
}
</script>
```
:::

<template>
    <div class='py20'>
    </div>
</template>
<script>
  import {
    StaffList,//用户
  getDeptStaffList, //部门
  getStaffQuery, //人员
  getRoleList, //角色
  getPostList, //岗位
} from "@/components/api/index.js";
  import tableHead from "@/components/tableHead/tableHead.vue";
export default {
  components:{tableHead},
  data () {
    return {
      optionsTable: {
        tableHead:{
          title:'表格列表',
          item:[
            {
              type:'search', //搜索类型
              icon:'el-icon-search',
              label:'角色',
              done:this.search
            },
            {
              type:'icon',
              icon:'el-icon-delete',
              done:this.remove
            },
            {
              type:'icon', //图标类型
              icon:'el-icon-s-tools',
              done:this.screening
            },
            {
              type:'icon',
              icon:'el-icon-refresh-right',
              done:this.refresh
            },
            {
              type:'column',
              icon:'el-icon-menu',
            },
            {
              type:'button', //按钮类型
              icon:'el-icon-plus',
              name:'添加',
              done:this.add
            }
          ]
        },
        api: getRoleList,
        searchConfig: [
          {
            type: 'input',
            label: '角色名称',
            prop: 'keyword',
            attrs: {
              clearable: true
            }
          },
          {
            type: 'select',
            label: '状态',
            prop: 'status',
          }
        ],
        params: {
        },
        col: [
          {
            label: '角色名称',
            prop: 'name',
            template:true
          },
          {
            label: '角色名称2',
            prop: 'name'
          },
          {
            label: '权限字符',
            prop: 'sourceIdentifier'
          },
          {
            label: '角色状态',
            prop: 'status',
            enum: 'statusData'
          }
        ]
      }
    }
  },
  methods:{
    remove(item){
      let ids = this.$refs.tableRef.getSelect()
      debugger
    },
    search(item){
      this.$refs.tableRef.search.keyWord = item
      this.$refs.tableRef.search.keyword = item
       this.$refs.tableRef.getTable()
      // debugger
    },
    refresh(item){
       this.$refs.tableRef.getTable()
      // debugger
    },
    add(item){
      this.$refs.tableRef.getTable()
      // debugger
    },
    //是否显示筛选
    screening(item){
      this.$refs.tableRef.isSearch = !this.$refs.tableRef.isSearch
    },
    hideFun(){
      return false
    },
    //选择显示列
    setcolumn(data){
      console.log(data,998)
      this.$set(this.optionsTable,'col',data)
      // this.optionsTable.col=data
      // this.$refs.tableRef.getTable()
    }
  }
}
</script>