diff --git a/src/api/system/menu.js b/src/api/system/menu.js
index b71119f..810c236 100644
--- a/src/api/system/menu.js
+++ b/src/api/system/menu.js
@@ -8,16 +8,18 @@ export function save(data) {
   })
 }
 
-export function listmenu() {
-  return request({
-    url: '/api/admin/menu',
-    method: 'get'
-  })
+export function listmenu(isLoading = true,params) {
+  return request({
+    url: '/api/admin/menu',
+    method: 'get',
+    params,
+    isLoading
+  })
 }
-export function del(data) {
-  return request({
-    url: '/api/admin/menu/delete',
-    method: 'post',
-    data
-  })
+export function del(data) {
+  return request({
+    url: '/api/admin/menu/delete',
+    method: 'post',
+    data
+  })
 }
diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index a970359..7ead59f 100644
--- a/src/components/XyTable/index.vue
+++ b/src/components/XyTable/index.vue
@@ -1,117 +1,402 @@
 <script>
+import axios from 'axios';
+import {getToken} from "@/utils/auth";
 export default {
   props: {
-    height: {
-      type: Number
-    },
-    list: {
+    //请求相关
+    action:[String,Function], //String传入请求地址 Function传入返回promise的方法
+    reqOpt:Object, //请求参数配置
+    resProp:{
+      type:String,
+      default:'data'
+    },//请求后需要获取表格数据键名
+
+    //操作权限
+    auths: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
+
+    //table props
+    /**
+     * @type {Array}
+     * [
+     *   {
+     *     type: ("selection"|"index"|"expand"),
+     *     index: [Number,Function(index)], //type=index,通过传递 index 属性来自定义索引
+     *     columnKey: "", //column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
+     *     label: "",
+     *     prop: "",
+     *     width: "",
+     *     minWidth: "",
+     *     fixed: ("true"| "left"| "right"),
+     *     renderHeader:(h, { column, $index}) => {
+     *     },
+     *     sortable:[Boolean,String] (true|false|"custom"),//custom需监听 Table 的 sort-change 事件
+     *     sortMethod: (a,b) => {}, //对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致
+     *     sortBy:[String,Array,Function(row, index)],//指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推
+     *     sortOrders:[Array] (['ascending', 'descending', null]),//数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效
+     *     resizable:[Boolean], //需要在 el-table 上设置 border 属性为真
+     *     formatter:[Function(row, column, cellValue, index)],
+     *     showOverflowTooltip:[Boolean],
+     *     align: ("left","center","right"),
+     *     headerAlign:	("left","center","right"),
+     *     className:[String],
+     *     labelClassName:[String],
+     *     selectable:[Function(row, index)],//仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
+     *     reserveSelection:[Boolean],//仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
+     *     filters:[Array[{ text, value }]],
+     *     filterPlacement:[String],
+     *     filterMultiple:[Boolean],
+     *     filterMethod:[Function(value, row, column)],
+     *     filteredValue:[Array]
+     *   }
+     * ]
+     */
     tableItem: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
-    indent: {
-      type: Number,
-      default: 18
+    //数据
+    list: {
+      type: Array,
+      default: () => [],
     },
-    cellStyle: {
-      type: Function,
-      default: () => {
-      }
+    height: {
+      type: [String, Number],
     },
-    rowStyle: {
-      type: Function,
-      default: () => {
-      }
+    maxHeight: [String, Number],
+    //斑马纹
+    stripe: {
+      type: Boolean,
+      default: false,
     },
-    headerRowStyle: {
-      type: Function,
-      default: () => {
-      }
+    //是否带有纵向边框
+    border: {
+      type: Boolean,
+      default: true,
     },
-    headerCellStyle: {
-      type: Function,
-      default: () => {
-      }
+    size: String, // medium / small / mini
+    fit: {
+      type: Boolean,
+      default: true,
     },
-    defaultExpandAll: {
+    showHeader: {
       type: Boolean,
-      default: true
+      default: true,
     },
-    expandRowKeys:{
-      type: Array,
-      default: ()=>[]
+    highlightCurrentRow: {
+      type: Boolean,
+      default: true,
     },
-    rowKey:{
-      type:[String,Function],
-      default:'id'
+    currentRowKey: [String, Number],
+    rowClassName: [Function, String],
+    rowStyle: [Function, Object],
+    cellClassName: [Function, String],
+    cellStyle: [Function, Object],
+    headerRowClassName: [Function, String],
+    headerRowStyle: [Function, Object],
+    headerCellClassName: [Function, String],
+    headerCellStyle: [Function, Object],
+    rowKey: {
+      type: [String, Function],
+      default: "id",
     },
-    showHeader: {
+    emptyText: String,
+    defaultExpandAll: {
       type: Boolean,
-      default: true
+      default: true,
     },
+    expandRowKeys: Array, //可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
+    defaultSort: Object, //默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序（order: ascending, descending）
+    tooltipEffect: String,
     showSummary: {
       type: Boolean,
-      default: false
+      default: false,
+    },
+    sumText: {
+      type: String,
+      default: "合计",
     },
-    summaryMethod: {
-      type: Function
+    summaryMethod: Function, //Function({ columns, data })
+    spanMethod: Function,
+    selectOnIndeterminate: Boolean,
+    //展示树形数据时，树节点的缩进
+    indent: {
+      type: Number,
+      default: 18,
     },
+    lazy: Boolean,
+    load: Function, //Function(row, treeNode, resolve)
     treeProps: {
       type: Object,
       default: () => {
-        return {children: 'children', hasChildren: 'hasChildren'}
-      }
+        return { children: "children", hasChildren: "hasChildren" };
+      },
     },
+
     tableStyle: {
       type: Object,
       default: () => {
-        return {width: '100%', marginBottom: "20px"}
-      }
+        return { width: "100%", marginBottom: "20px" };
+      },
     },
     btnWidth: {
       type: Number,
-      default: 190
+      default: 140,
     },
 
     //  分页相关
     isPage: {
       type: Boolean,
-      default: true
+      default: true,
     },
     total: {
       type: Number,
-      default: 0
+      default: 0,
     },
     pageSize: {
-      type: Number
+      type: Number,
     },
-    pageSizeOpts:{
-      type:Array,
-      default:()=>[10, 20, 30, 40]
+    pageSizeOpts: {
+      type: Array,
+      default: () => [10, 20, 30, 40],
+    },
+    showSizer: {
+      type: Boolean,
+      default: true,
     },
-    showSizer:{
-      type:Boolean,
-      default:true
-    }
   },
   data() {
     return {
-      tableHeight: 0,
-      isShowPage: true
-    }
+      isBtns: false,
+      tableHeight: null,
+        //document.documentElement.clientHeight -50 -37 - 20- 25 - 76,
+      isShowPage: true,
+      checkTable: this.tableItem.map((item) => item?.prop),
+      loading: false,
+      visibleBtn: true, //操作按钮显示
+
+      totalData:0,
+      listData:[],
+      selectOpt:{
+        page:1,
+        page_size:10,
+        sort_name:'',
+        sort_type:''
+      },
+    };
   },
   methods: {
+    //方法
     initLoad() {
-      var that = this;
-      var clientHeight = document.documentElement.clientHeight
-      var lxHeader_height = 96.5; //查询 头部
-      var paginationHeight = 37; //分页的高度
-      var topHeight = 50; //页面 头部
-      let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
-      that.tableHeight = tableHeight;
+      let clientHeight = document.documentElement.clientHeight;
+      let lxheader = document.querySelector('.v-header').getBoundingClientRect()
+      let lxHeader_height = lxheader.height + 25; //查询 头部
+      let paginationHeight = 37; //分页的高度
+      let topHeight = 50; //页面 头部
+      this.tableHeight =
+        clientHeight - lxHeader_height - topHeight - paginationHeight - 20 - 25;
+      //console.log(this.tableHeight)
+    },
+    getTableData(isRefresh = false){
+      if(isRefresh){
+        this.selectOpt.page = 1
+      }
+      switch (typeof this.action){
+        case "string":
+          this.loading = true
+          axios({
+            baseURL:process.env.VUE_APP_BASE_API,
+            url:this.action,
+            headers:{
+              Authorization:"Bearer " + getToken()
+            },
+            params:(this.reqOpt.method && this.reqOpt.method === 'get') ? this.selectOpt : '',
+            data:(this.reqOpt.method && this.reqOpt.method === 'post') ? this.selectOpt : '',
+            ...this.reqOpt
+          }).then(res => {
+            this.listData = this.getByStrkey(res.data,this.resProp)
+            this.totalData = res.data.total
+            setTimeout(() => {
+              this.loading = false
+            },300)
+          }).catch(err => {
+            console.error(err)
+            this.loading = false
+          })
+          break;
+        case "function":
+          this.loading = true
+          this.action(false,{
+            ...this.selectOpt,
+            ...this.reqOpt
+          }).then(res => {
+            this.listData = this.getByStrkey(res,this.resProp)
+            this.totalData = res.total
+            setTimeout(() => {
+              this.loading = false
+            },300)
+          }).catch(err => {
+            console.error(err)
+            this.loading = false
+          })
+          break;
+      }
+    },
+    getByStrkey(obj,str){
+      if(!str) return obj
+      let res = this.deepCopy(obj);
+      let keys = str.split('.')
+      keys.forEach(key => {
+        res = res[key]
+      })
+      return res;
+    },
+    deepCopy(data){
+      //string,number,bool,null,undefined,symbol
+      //object,array,date
+      if (data && typeof data === "object") {
+        //针对函数的拷贝
+        if (typeof data === "function") {
+          let tempFunc = data.bind(null);
+          tempFunc.prototype = this.deepCopy(data.prototype);
+          return tempFunc;
+        }
+
+        switch (Object.prototype.toString.call(data)) {
+          case "[object String]":
+            return data.toString();
+          case "[object Number]":
+            return Number(data.toString());
+          case "[object Boolean]":
+            return new Boolean(data.toString());
+          case "[object Date]":
+            return new Date(data.getTime());
+          case "[object Array]":
+            let arr = [];
+            for (let i = 0; i < data.length; i++) {
+              arr[i] = this.deepCopy(data[i]);
+            }
+            return arr;
+
+          //js自带对象或用户自定义类实例
+          case "[object Object]":
+            let obj = {};
+            for (let key in data) {
+              //会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop)
+              obj[key] = this.deepCopy(data[key]);
+            }
+            return obj;
+        }
+      } else {
+        //string,number,bool,null,undefined,symbol
+        return data;
+      }
+    },
+    sortListener({column, prop, order}){
+      this.selectOpt.sort_name = prop
+      switch (order){
+        case "ascending":
+          this.selectOpt.sort_type = 'ASC'
+          break;
+        case "descending":
+          this.selectOpt.sort_type = 'DESC'
+          break;
+        default:
+          this.selectOpt.sort_type = ''
+      }
+      this.getTableData()
+    },
+
+    //element table方法
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
+    toggleRowSelection(row) {
+      this.$nextTick(() => {
+        this.$refs.table.toggleRowSelection(row);
+      });
+    },
+    toggleAllSelection() {
+      this.$refs.table.toggleAllSelection();
+    },
+    toggleRowExpansion(row, expanded = true) {
+      this.$refs.table.toggleRowExpansion(row, expanded);
+    },
+    setCurrentRow(row) {
+      this.$refs.table.toggleRowExpansion(row);
+    },
+    clearSort() {
+      this.$refs.table.clearSort();
+    },
+    clearFilter() {
+      this.$refs.table.clearFilter();
+    },
+    doLayout() {
+      this.$refs.table.doLayout();
+    },
+    sort() {
+      this.$refs.table.sort();
+    },
+
+    //table通讯事件
+    delete(row, type) {
+      this.$emit(type, row);
+    },
+    editor(row, type) {
+      this.$emit(type, row);
+    },
+    select(selection, row) {
+      this.$emit("select", selection, row);
+    },
+    selectAll(selection) {
+      this.$emit("select-all", selection);
+    },
+    selectionChange(selection) {
+      this.$emit("selection-change", selection);
+    },
+    cellMouseEnter(row, column, cell, event) {
+      this.$emit("cell-mouse-enter", { row, column, cell, event });
+    },
+    cellMouseLeave(row, column, cell, event) {
+      this.$emit("cell-mouse-leave", { row, column, cell, event });
+    },
+    cellClick(row, column, cell, event) {
+      this.$emit("cell-click", { row, column, cell, event });
+    },
+    cellDblclick(row, column, cell, event) {
+      this.$emit("cell-dblclick", { row, column, cell, event });
+    },
+    rowClick(row, column, event) {
+      this.$emit("row-click", { row, column, event });
+    },
+    rowContextmenu(row, column, event) {
+      this.$emit("row-contextmenu", { row, column, event });
+    },
+    rowDblclick(row, column, event) {
+      this.$emit("row-dblclick", { row, column, event });
+    },
+    headerClick(column, event) {
+      this.$emit("header-click", column, event);
+    },
+    headerContextmenu(column, event) {
+      this.$emit("header-contextmenu", column, event);
+    },
+    sortChange({ column, prop, order }) {
+      this.$emit("sort-change", { column, prop, order });
+    },
+    filterChange(filters) {
+      this.$emit("filter-change", filters);
+    },
+    currentChange(currentRow, oldCurrentRow) {
+      this.$emit("current-change", currentRow, oldCurrentRow);
+    },
+    headerDragend(newWidth, oldWidth, column, event) {
+      this.$emit("header-dragend", { newWidth, oldWidth, column, event });
+    },
+    expandChange(row, expanded) {
+      this.$emit("expand-change", row, expanded);
     },
     deleteClick(row) {
       this.$emit('delete', row)
@@ -119,268 +404,381 @@ export default {
     editorClick(row) {
       this.$emit('editor', row)
     },
-    selectClick(selection, row) {
-      this.$emit('select', selection, row)
-    },
-    selectAllClick(selection){
-      this.$emit('select-all',selection)
-    },
-    cellClick(row, column, cell) {
-      this.$emit('cellClick', row, column, cell)
-    },
 
     createPage() {
       if (this.isPage)
         return (
           <div>
-
             <transition
               enter-active-class="slide-in-bottom"
-              leave-to-class="slide-out-down">
+              leave-to-class="slide-out-down"
+            >
               <Page
                 page-size-opts={this.pageSizeOpts}
                 show-total={true}
                 page-size={this.pageSize}
                 v-show={this.isShowPage}
-                total={this.total}
+                total={this.action ? (this.totalData || this.listData.length) : this.total}
                 size="small"
                 show-elevator={true}
                 show-sizer={this.showSizer}
-                class="xy-table-page"
+                class="xy-table__page"
                 on={{
-                  ['on-page-size-change']: (e) => this.$emit('pageSizeChange', e),
-                  ['on-change']: (e) => this.$emit('pageIndexChange', e)
-                }}>
-              </Page>
+                  ["on-page-size-change"]: (e) => {
+                    if(this.action){
+                      this.selectOpt.page_size = e
+                      this.selectOpt.page = 1
+                      this.getTableData()
+                    }
+                    this.$emit("pageSizeChange", e)
+                  },
+                  ["on-change"]: (e) => {
+                    if(this.action){
+                      this.selectOpt.page = e
+                      this.getTableData()
+                    }
+                    this.$emit("pageIndexChange", e)
+                  }
+                }}
+              ></Page>
             </transition>
+
+            <el-popover
+              placement="top-start"
+              width="200"
+              trigger="hover"
+              scopedSlots={{
+                default: () => {
+                  return (
+                    <el-checkbox-group v-model={this.checkTable}>
+                      {this.$props?.tableItem?.map((item, index) => {
+                        return item.type !== 'expand' ? (
+                          <el-checkbox label={item.prop} key={item.prop}>
+                            {item.label}
+                          </el-checkbox>
+                        ) : ''
+                      })}
+                    </el-checkbox-group>
+                  );
+                },
+              }}
+            >
+              <el-button
+                slot="reference"
+                size="mini"
+                type="primary"
+                class="xy-table__setting"
+                icon="el-icon-s-tools"
+                circle
+                style={{
+                  padding: "3px",
+                }}
+              ></el-button>
+            </el-popover>
           </div>
-        )
+        );
     },
-    toggleRowSelection(row) {
-      this.$nextTick(() => {
-        this.$refs.table.toggleRowSelection(row);
-      })
+
+    isCreateAuthBtns() {
+      let _this = this;
+      let res = (
+        <el-table-column
+          key={`xy-table-btn`}
+          fixed="right"
+          label="操作"
+          minWidth={_this.btnWidth}
+          header-align="center"
+          scopedSlots={{
+            default: (scope) => {
+              if (_this.auths?.length <= 0) return;
+              let { dom, flag } = _this.createAuthBtns(scope);
+              _this.isBtns = flag;
+              return dom;
+            },
+          }}
+        ></el-table-column>
+      );
+      if (_this.isBtns !== 0) {
+        return res;
+      }
     },
-    clearSelection() {
-      this.$refs.table.clearSelection();
+    createAuthBtns(scope) {
+      let _this = this;
+      if (_this.auths?.length > 0) {
+        let btns = new Map();
+        btns.set(
+          "edit",
+          <i-button
+            style={{
+              "margin-right": "6px",
+            }}
+            type="primary"
+            size="small"
+            onClick={() => _this.editorClick(scope.row, "edit")}
+          >
+            编辑
+          </i-button>
+        );
+        btns.set(
+          "delete",
+          <Poptip
+            transfer={true}
+            confirm
+            title="确认要删除吗"
+            on={{ ["on-ok"]: () => _this.deleteClick(scope.row, "delete") }}
+          >
+            <i-button
+              style={{
+                "margin-right": "6px",
+              }}
+              type="error"
+              size="small"
+            >
+              删除
+            </i-button>
+          </Poptip>
+        );
+        let flag = 0;
+        let dom = (
+          <div
+            style={{
+              display: "flex",
+              "justify-content": "flex-start",
+              "align-items": "center",
+              "flex-wrap": "wrap",
+            }}
+          >
+            {_this.auths.map((item, index) => {
+              if (_this.$scopedSlots[item]) {
+                flag = index;
+                return _this.$scopedSlots[item](scope, item, index);
+              } else {
+                if (btns.get(item)) {
+                  flag = index;
+                  return btns.get(item);
+                }
+              }
+            })}
+          </div>
+        );
+        return { dom, flag };
+      }
+    },
+  },
+  computed: {
+    tableFormat() {
+      return this.tableItem.filter((item) => {
+        return this.checkTable.indexOf(item.prop) !== -1;
+      });
     },
-    toggleAllSelection() {
-      this.$refs.table.toggleAllSelection()
-    }
   },
   created() {
-    this.initLoad()
+    this.getTableData()
   },
   mounted() {
+    this.initLoad();
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.doLayout();
+    })
   },
   render(h) {
-    let {
-      createPage,
-      summaryMethod,
-      cellClick,
-      btnWidth,
-      selectClick,
-      selectAllClick,
-      height,
-      createIndexRow,
-      tableStyle,
-      treeProps,
-      showSummary,
-      showHeader,
-      $scopedSlots,
-      showIndex,
-      defaultExpandAll,
-      headerCellStyle,
-      headerRowStyle,
-      rowStyle,
-      cellStyle,
-      indent,
-      tableHeight,
-      tableItem,
-      list,
-      rowKey,
-      deleteClick,
-      editorClick
-    } = this
+    let { $scopedSlots } = this;
     return (
-      <div class="table-tree" style={{'position': 'relative'}}>
-        {tableItem && tableItem.length > 0 ?
-          (<el-table
-            ref="table"
-            show-summary={showSummary}
-            show-header={showHeader}
-            summary-method={summaryMethod}
-            header-row-style={headerRowStyle}
-            header-cell-style={headerCellStyle}
-            row-style={rowStyle}
-            cell-style={cellStyle}
-            indent={indent}
-            data={list}
-            height={height ?? tableHeight}
+      <div class="table-tree" style={{ position: "relative" }}>
+        {this.tableItem && this.tableItem.length > 0 ? (
+          <el-table
             class="v-table"
-            style={tableStyle}
-            row-key={rowKey}
-            border={true}
-            default-expand-all={defaultExpandAll}
-            tree-props={treeProps}
-            fit={true}
+            v-loading={this.loading}
+            ref="table"
+            data={this.action ? this.listData : this.list}
+            height={this.height ?? this.tableHeight}
+            max-height={this.maxHeight}
+            stripe={this.stripe}
+            border={this.border}
+            size={this.size}
+            fit={this.fit}
+            show-header={this.showHeader}
+            highlight-current-row={this.highlightCurrentRow}
+            current-row-key={this.currentRowKey}
+            row-class-name={this.rowClassName}
+            row-style={this.rowStyle}
+            cell-class-name={this.cellClassName}
+            cell-style={this.cellStyle}
+            header-row-class-name={this.headerRowClassName}
+            header-row-style={this.headerRowStyle}
+            header-cell-class-name={this.headerCellClassName}
+            header-cell-style={this.headerCellStyle}
+            row-key={this.rowKey}
+            empty-text={this.emptyText}
+            default-expand-all={this.defaultExpandAll}
+            expand-row-keys={this.expandRowKeys}
+            default-sort={this.defaultSort}
+            tooltip-effect={this.tooltipEffect}
+            show-summary={this.showSummary}
+            sum-text={this.sumText}
+            summary-method={this.summaryMethod}
+            span-method={this.spanMethod}
+            select-on-indeterminate={this.selectOnIndeterminate}
+            indent={this.indent}
+            lazy={this.lazy}
+            load={this.load}
+            tree-props={this.treeProps}
             on={{
-              ['select']: selectClick,
-              ['cell-click']: cellClick,
-              ['select-all']: selectAllClick}}>
-              <el-table-column
-                 type="index"
-                 width="50" fixed="left" align="center" >
-               </el-table-column>
-
-            {
-              tableItem.map((item, index) => {
-                //自定义表格内容
-                if (item.customFn) {
-                  return (
-                    <el-table-column
-                      align={item.align ?? 'center'}
-                      sortable={item.sortable ?? true}
-                      width={item.width ?? 'auto'}
-                      min-width={item.minWidth ?? item.width}
-                      header-align={item.headerAlign ?? 'center'}
-                      label={item.label}
-                      prop={item.prop}
-                      scopedSlots={{
-                        default(scope) {
-                          return item.customFn(scope.row,scope)
-                        }
-                      }}>
-                    </el-table-column>
-                  )
-                } else if (item.multiHd) {
-                  //二级表头结构表格内容
-                  return (
-                    <el-table-column
-                      header-align={item.headerAlign ?? 'center'}
-                      label={item.label}>
-                      {item.multiHd.map((item1, index1) => {
-                        if (item1.customFn) {
-                          return (
-                            <el-table-column
-                              align={item1.align ?? 'center'}
-                              header-align={item1.headerAlign ?? 'center'}
-                              label={item1.label}
-                              width={item1.width ?? 'auto'}
-                              min-width={item1.minWidth ?? item1.width}
-                              sortable={item1.sortable ?? true}
-                              scopedSlots={{
-                                default(scope) {
-                                  return item1.customFn(scope.row)
-                                }
-                              }}>
-                            </el-table-column>
-                          )
-                        } else {
-                          return (
-                            <el-table-column
-                              fixed={item1.fixed ?? false}
-                              align={item1.align ?? 'center'}
-                              header-align={item1.headerAlign ?? 'center'}
-                              prop={`${item.Fprop ? item.Fprop + '.' : ''}${item1.prop}`}
-                              label={item1.label}
-                              width={item1.width ?? 'auto'}
-                              min-width={item1.minWidth ?? item1.width}
-                              sortable={item1.sortable ?? true}
-                              type={item1.type ?? ''}
-                              formatter={item1.formatter}>
-                            </el-table-column>
-                          )
-                        }
-                      })}
-                    </el-table-column>
-                  )
-                } else {
-                  //默认内容
-                  return (
-                    <el-table-column
-                      fixed={item.fixed ?? false}
-                      formatter={item.formatter}
-                      width={item.width ?? 'auto'}
-                      min-width={item.minWidth ?? item.width}
-                      header-align={item.headerAlign ?? 'center'}
-                      align={item.align ?? 'center'}
-                      label={item.label}
-                      prop={item.prop}
-                      sortable={item.sortable ?? true}
-                      type={item.type}
-                      selectable={item.selectable}
-                      scopedSlots={item.type === 'expand' ? {
-                        default(props){
-                          return item.expandFn(props)
+              ["select"]: this.select,
+              ["select-all"]: this.selectAll,
+              ["selection-change"]: this.selectionChange,
+              ["cell-mouse-enter"]: this.cellMouseEnter,
+              ["cell-mouse-leave"]: this.cellMouseLeave,
+              ["cell-click"]: this.cellClick,
+              ["cell-dblclick"]: this.cellDblclick,
+              ["row-click"]: this.rowClick,
+              ["row-contextmenu"]: this.rowContextmenu,
+              ["row-dblclick"]: this.rowDblclick,
+              ["header-click"]: this.headerClick,
+              ["header-contextmenu"]: this.headerContextmenu,
+              ["sort-change"]: this.action ? this.sortListener : this.sortChange,
+              ["filter-change"]: this.filterChange,
+              ["current-change"]: this.currentChange,
+              ["header-dragend"]: this.headerDragend,
+              ["expand-change"]: this.expandChange,
+            }}
+          >
+            {this.tableFormat.map((item, index) => {
+              if ($scopedSlots[item.prop]) {
+                return $scopedSlots[item.prop](item, index);
+              }
+              return (
+                <el-table-column
+                  key={String(Math.random())+index}
+                  type={item.type}
+                  index={item.index}
+                  column-key={String(Math.random())}
+                  label={item.label}
+                  prop={item.prop}
+                  width={item.width ?? "auto"}
+                  min-width={item.minWidth}
+                  fixed={item.fixed ?? false}
+                  render-header={item.renderHeader}
+                  sortable={item.sortable}
+                  sort-method={item.sortMethod}
+                  sort-by={item.sortBy}
+                  sort-orders={item.sortOrders}
+                  resizale={item.resizale}
+                  formatter={item.formatter}
+                  show-overflow-tooltip={item.showOverflowTooltip ?? true}
+                  align={item.align ?? "center"}
+                  header-align={item.headerAlign ?? "center"}
+                  class-name={`xy-table__row-fade ${item.className}`}
+                  label-class-name={`xy-table__title-fade ${item.labelClassName}`}
+                  selectable={item.selectable}
+                  reserve-selection={item.reserveSelection}
+                  filters={item.filters}
+                  filter-placement={item.filterPlacement}
+                  filter-multiple={item.filterMultiple}
+                  filter-method={item.filterMethod}
+                  filtered-value={item.filteredValue}
+                  scopedSlots={
+                    item.customFn || item.type === "expand"
+                      ? {
+                          default(scope) {
+                            if (item.type === "expand") {
+                              return item.expandFn(scope);
+                            }
+                            if (item.customFn) {
+                              return item.customFn(scope.row, scope);
+                            }
+                          },
                         }
-                      } : ''}>
-                    </el-table-column>
-                  )
-                }
-              })}
-
-            {
-              $scopedSlots.btns ? $scopedSlots.btns() :
-                (<el-table-column
-                  fixed="right"
-                  label="操作"
-                  width={btnWidth}
-                  header-align="center"
-                  scopedSlots={{
-                    default(scope) {
-                      return (
-                        <div>
-                          <Poptip
-                            transfer={true}
-                            confirm
-                            title="确认要删除吗"
-                            on={{['on-ok']: () => deleteClick(scope.row)}}>
-                            <i-button
-                              type="error"
-                              size="small"
-                              style="margin-left: 10px;"
-                              ghost>删除
-                            </i-button>
-                          </Poptip>
-
-                          <i-button
-                            type="primary"
-                            size="small"
-                            style="margin-left: 10px;"
-                            ghost
-                            onClick={() => editorClick(scope.row)}>编辑
-                          </i-button>
-                        </div>
-                      )
-                    }
-                  }}>
-                </el-table-column>)
-            }
-          </el-table>)
-          :
-          <el-table height={height ?? tableHeight}/>}
+                      : ""
+                  }
+                >
+                  { item.multiHd
+                    ? item.multiHd.map((item1, index1) => {
+                        return (
+                          <el-table-column
+                            key={`xy-table-col-multi-${item1.prop}`}
+                            prop={`${item.pProp ? item.pProp + "." : ""}${
+                              item1.prop
+                            }`}
+                            type={item1.type}
+                            index={item1.index}
+                            column-key={String(Math.random())}
+                            label={item1.label}
+                            prop={item1.prop}
+                            width={item1.width ?? "auto"}
+                            min-width={item1.minWidth}
+                            fixed={item1.fixed}
+                            render-header={item1.renderHeader}
+                            sortable={item1.sortable ?? false}
+                            sort-method={item1.sortMethod}
+                            sort-by={item1.sortBy}
+                            sort-orders={item1.sortOrders}
+                            resizale={item1.resizale ?? false}
+                            formatter={item1.formatter}
+                            show-overflow-tooltip={item1.showOverflowTooltip ?? true}
+                            align={item1.align ?? "center"}
+                            header-align={item1.headerAlign ?? "center"}
+                            class-name={`xy-table__row-fade ${item1.className}`}
+                            label-class-name={`xy-table__title-fade ${item1.labelClassName}`}
+                            selectable={item1.selectable}
+                            reserve-selection={item1.reserveSelection}
+                            filters={item1.filters}
+                            filter-placement={item1.filterPlacement}
+                            filter-multiple={item1.filterMultiple}
+                            filter-method={item1.filterMethod}
+                            filtered-value={item1.filteredValue}
+                            scopedSlots={
+                              item1.customFn
+                                ? {
+                                    default(scope1) {
+                                      return item1.customFn(scope1);
+                                    },
+                                  }
+                                : ""
+                            }
+                          ></el-table-column>
+                        );
+                      })
+                    : ""}
+                </el-table-column>
+              );
+            })}
+            { $scopedSlots.btns ? $scopedSlots.btns() : this.isCreateAuthBtns() }
+          </el-table>
+        ) : (
+          <el-table height={this.height ?? this.tableHeight} />
+        )}
 
         <el-backtop
           target=".el-table__body-wrapper"
           visibility-height={120}
           bottom={100}
-          right={36}>
-        </el-backtop>
-        {createPage()}
+          right={36}
+        ></el-backtop>
+        { this.createPage() }
       </div>
-    )
-  }
-}
+    );
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @import "../../styles/variables.scss";
 
-::v-deep .el-table{
-  margin-bottom: 0!important;
+::v-deep .el-table {
+  margin-bottom: 0 !important;
 }
-.xy-table-page {
+.xy-table__setting {
+  font-size: 14px;
+
+  position: absolute;
+  z-index: 99;
+  bottom: 7px;
+  left: 10px;
+}
+.xy-table__page {
   display: flex;
   justify-content: right;
   border-bottom-right-radius: 4px;
@@ -394,22 +792,8 @@ export default {
   left: 0;
   right: 0;
 
-  &__close {
-    cursor: pointer;
-    border-radius: 100%;
-
-    padding: 4px;
-    z-index: 11;
-    position: absolute;
-    bottom: 2px;
-    left: 8px;
-
-    &:hover {
-      transform: scale(1.1, 1.1);
-    }
-  }
-
-  ::v-deep .ivu-page-item, .ivu-page-options {
+  ::v-deep .ivu-page-item,
+  .ivu-page-options {
     background: transparent !important;
   }
 
@@ -434,12 +818,11 @@ export default {
       display: none !important;
     }
   }
-
 }
 
 .slide-in-bottom {
   transform-origin: 0 100%;
-  animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 @keyframes slide-in-bottom {
@@ -455,7 +838,7 @@ export default {
 
 .slide-out-down {
   transform-origin: 0 100%;
-  animation: slide-out-down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: slide-out-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 @keyframes slide-out-down {
@@ -473,12 +856,12 @@ export default {
   animation: icon-scale-left 0.5s forwards ease-out;
   @keyframes icon-scale-left {
     from {
-
     }
     to {
       clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
       background: rgba(140, 140, 140, 0.7);
-      transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px) rotate(-90deg);
+      transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px)
+        rotate(-90deg);
     }
   }
 }
@@ -495,3 +878,29 @@ export default {
   }
 }
 </style>
+
+<style>
+.xy-table__row-fade {
+  animation: fade-in-row 600ms;
+}
+@keyframes fade-in-row {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+  }
+}
+.xy-table__title-fade {
+  animation: fade-in-title 600ms;
+}
+@keyframes fade-in-title {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/views/component/data.js b/src/views/component/data.js
new file mode 100644
index 0000000..3d5067b
--- /dev/null
+++ b/src/views/component/data.js
@@ -0,0 +1,66 @@
+const data = [
+  {
+    id:1,
+    name:'a',
+    age:10,
+    birth:'2022-01-01'
+  },
+  {
+    id:2,
+    name:'b',
+    age:11,
+    birth:'2022-01-01'
+  },
+  {
+    id:3,
+    name:'c',
+    age:14,
+    birth:'2022-01-01'
+  },
+  {
+    id:4,
+    name:'b',
+    age:11,
+    birth:'2022-01-01'
+  },
+  {
+    id:5,
+    name:'e',
+    age:20,
+    birth:'2022-01-02'
+  },
+  {
+    id:6,
+    name:'f',
+    age:20,
+    birth:'2022-01-02'
+  },
+  {
+    id:7,
+    name:'g',
+    age:20,
+    birth:'2022-01-02'
+  },
+  {
+    id:8,
+    name:'h',
+    age:20,
+    birth:'2022-01-02'
+  }
+]
+
+const getData = (params) => {
+  const { page,page_size } = params
+  let start = (page - 1) * page_size
+  let res = data.slice(start,start + page_size)
+  return {
+    per_page:page_size,
+    total:data.length,
+    data:res,
+    current_page:page
+  }
+}
+
+export {
+  getData
+}
diff --git a/src/views/component/table.vue b/src/views/component/table.vue
new file mode 100644
index 0000000..1a7ebb6
--- /dev/null
+++ b/src/views/component/table.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="container">
+    <!-- 查询配置 -->
+    <div>
+      <div ref="lxHeader">
+        <LxHeader icon="md-apps" text="管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+          <div slot="content"></div>
+          <slot>
+            <div>
+              <Button type="primary" style="margin-left: 10px" @click="$refs['xyTable'].getTableData()">查询</Button>
+              <Button type="primary"  style="margin-left: 10px">新增</Button>
+            </div>
+          </slot>
+        </LxHeader>
+      </div>
+    </div>
+
+    <xy-table
+      ref="xyTable"
+      :border="true"
+      :list="[]"
+      :req-opt="{keyword:'123'}"
+      res-prop=""
+      :table-item="table"></xy-table>
+  </div>
+</template>
+
+<script>
+import LxHeader from "@/components/LxHeader/index.vue";
+import { getData } from './data'
+import {listmenu} from '@/api/system/menu'
+export default {
+  components:{
+    LxHeader
+  },
+  data() {
+    return {
+      select:{
+        page:1,
+        page_size:10
+      },
+      list:[],
+      table:[
+        {
+          type:'expand',
+          width:46,
+          expandFn:props => {
+            return (
+              <div>{props.$index}</div>
+            )
+          }
+        },
+        {
+          prop:'id',
+          label:'编号',
+          width:80,
+          sortable: 'custom'
+        },
+        {
+          prop:'name',
+          label:'菜单',
+          width:120,
+          sortable:'custom',
+        },
+        {
+          prop:'url',
+          label:'菜单路径',
+          minWidth:140
+        },
+        {
+          prop:'path',
+          label:'路由',
+          minWidth:140
+        },
+        {
+          prop:'icon',
+          label:'图标',
+          minWidth:100
+        },
+        {
+          prop:'api_prefix',
+          label:'API前缀',
+          minWidth:100
+        },
+        {
+          prop:'sortnumber',
+          label:'排序',
+          width:100,
+          filters:[
+            {
+              text:"0",
+              value:0
+            },
+            {
+              text:"1",
+              value:1
+            }
+          ]
+        },
+      ]
+    }
+  },
+  methods: {
+    listmenu,
+    getList(){
+      this.total = getData(this.select).total
+      this.list = getData(this.select).data
+    }
+  },
+  computed: {},
+  mounted() {
+    this.getList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>