<!--  -->
<template>
  <div style="
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    ">

    <HTTable :columns="columns" :tableData="dataList" :event="tableEvent" :rowKey="'id'" rowParentKey="parentId" :isTree="true" :isCheck="true">
        <template v-slot:component="{row, text, rowIndex, cellIndex}" >
            <div style="color:red;"> {{text}}</div>
        </template>

    </HTTable>

  </div>
</template>

<script>
import HTTable from './component1/HTTable.vue'
import getTableData, { flattenData } from "./utils/data";
const dataList = getTableData().result;
const columns = [
  {
    title: "菜单名称",
    dataIndex: "name",
    key: "name",
    width: 300,
  },
  {
    title: "菜单类型",
    dataIndex: "menuType",
    key: "menuType",
    customRender: function (text) {
      if (text == 0) {
        return "菜单";
      } else if (text == 1) {
        return "菜单";
      } else if (text == 2) {
        return "按钮/权限";
      } else {
        return text;
      }
    },
    width: 100,
  },
  {
    title: "版本",
    dataIndex: "menuVersion",
    key: "menuVersion",
  },
  {
    title: "icon",
    dataIndex: "icon",
    key: "icon",
  },
  {
    title: "菜单标识",
    dataIndex: "sysModule",
    key: "sysModule",
  },
  {
    title: "组件",
    dataIndex: "component",
    key: "component",
    width: 200,
    scopedSlots: { customRender: "component" },
  },
  {
    title: "路径",
    dataIndex: "url",
    key: "url",
    width: 200,
    scopedSlots: { customRender: "url" },
  },
  {
    title: "排序",
    dataIndex: "sortNo",
    key: "sortNo",
    width: 100,
  },
  {
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 150,
  },
];
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'index',
  components: {HTTable},
  props: { },
  data() {
    // 这里存放数据
    return {columns,dataList};
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    tableEvent(keys,items){
        console.log('tableEvent====>',keys,items);
        
    }
  },
  }
</script>
<style lang='less' scoped>
</style>