<template>
  <el-table max-height="550" :data="tableData" tooltip-effect="dark" row-key="id" :default-expand-all='false'
    :tree-props="{children: 'childs'}" lazy border :header-cell-style="{ 'letter-spacing':'3px','font-size':'14px' }">
    <el-table-column prop="name" show-overflow-tooltip label="菜单名称"></el-table-column>
    <el-table-column prop="url" show-overflow-tooltip label="url地址"></el-table-column>
    <!-- <el-table-column prop="pid" align="center" show-overflow-tooltip  label="父id"></el-table-column> -->
    <el-table-column prop="order" align="center" show-overflow-tooltip label="排序"></el-table-column>
    <el-table-column prop="icon" align="center" show-overflow-tooltip label="图标">
      <template slot-scope="scope">
        <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon" style="margin-right: 5px;font-size:22px" />
      </template>
    </el-table-column>
    <el-table-column width="300" align="center" label="操作">
      <template slot-scope="scope">
        <el-button v-if="showButtons.update" @click="btnclick(scope.row,1)" size="mini" title="编辑" type="primary"
          icon="el-icon-edit"></el-button>
        <el-button v-if="showButtons.del" @click="btnclick(scope.row,2)" size="mini" title="删除" type="danger"
          icon="el-icon-delete">
        </el-button>
        <el-button v-if="scope.row.pid==-1   && showButtons.add  " @click="btnclick(scope.row,3)" size="mini" title="新增"
          type="success" icon="el-icon-plus">
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    props: {
      tableData: {
        type: Array,
        default: () => [],
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
      tableLoading: {
        type: Boolean,
        default: () => false,
      },
    },
    methods: {
      btnclick(val, key) {
        this.$emit('btnclick', val, key)
      }
    }
  }

</script>
<style lang='scss' scoped>

</style>
