在ElementUI的Table组件中实现懒加载效果，并默认展开第一层数据，可以通过设置lazy属性为true来启用懒加载，并提供load方法来加载子节点数据。同时，可以通过设置default-expand-all或:default-expanded-keys属性来默认展开第一层数据。

以下是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    lazy
    :load="load"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    default-expand-all
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      loading: false
    };
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: ++this.id,
            date: '2016-05-02',
            name: '张小刚',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ]);
      }, 1000);
    }
  }
};
</script>

在这个例子中，tableData 是表格的数据源，load 方法用于加载子节点数据。lazy 属性被设置为 true 来启用懒加载功能。tree-props 属性用于指定树形数据的默认属性名，default-expand-all 属性用于默认展开所有层级的数据。

请注意，示例中的 load 方法是一个简单的模拟，它在1秒后通过 resolve 函数返回模拟的子节点数据。在实际应用中，你需要替换为真实的异步数据加载逻辑。

在Element UI的Tree组件中添加滚动条，可以通过CSS样式来实现。你可以为Tree组件的外部容器设置一个固定高度，并且添加overflow-y: auto样式来自动添加垂直滚动条。

以下是一个简单的示例：

HTML:

<template>
  <el-tree
    :data="data"
    class="custom-tree"
    :props="defaultProps">
  </el-tree>
</template>

CSS:

<style>
.custom-tree {
  height: 400px; /* 设置你需要的高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>

JavaScript:

<script>
export default {
  data() {
    return {
      data: [...], // 你的树形数据
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>

在这个例子中，.custom-tree 类被添加到了Tree组件上，并且通过CSS设置了一个固定高度并启用了垂直滚动条。当内容超出这个高度时，滚动条就会出现。

在Vue项目中引入Element UI，首先需要安装Element UI库：

npm install element-ui --save

然后在你的主入口文件（通常是main.js或app.js）中引入Element UI并全局注册：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 引入Element UI样式
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

如果你只想在某些组件中局部使用Element UI组件，可以在组件中按需引入：

<template>
  <el-button>按钮</el-button>
</template>
 
<script>
import { Button } from 'element-ui';
 
export default {
  components: {
    'el-button': Button
  }
}
</script>

请确保你的Vue项目配置能够支持CSS文件的引入和处理。

在Element UI中，el-date-picker组件的日期选择器提供了一个“此刻”按钮，该按钮允许用户选择当前日期和时间。如果需要去掉这个按钮，可以通过自定义类名来覆盖默认样式。

以下是一个例子，演示如何通过添加一个自定义类名来隐藏“此刻”按钮：

<template>
  <el-date-picker
    v-model="value"
    type="datetime"
    placeholder="选择日期时间"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      // 自定义选项，用于配置date-picker组件的行为
      pickerOptions: {
        shortcuts: [{
          text: '此刻',
          onClick(picker) {
            // 点击时不执行任何操作
          }
        }]
      }
    };
  }
};
</script>
 
<style>
/* 隐藏“此刻”按钮 */
.el-picker-panel__shortcut .el-button:first-child {
  display: none;
}
</style>

在上述代码中，我们通过在pickerOptions中定义了一个空的onClick函数来禁用“此刻”按钮的默认行为，并通过CSS隐藏了按钮。这样，当你使用el-date-picker组件时，“此刻”按钮将不会出现在面板中。

这是一个涉及到前后端的项目，前端使用了Node.js、Vue和Element UI，后端使用MySQL。由于这个问题涉及的内容较多且复杂，我将提供一个简化版本的点餐管理系统的核心功能代码示例。

前端部分（Vue + Element UI）:

<template>
  <el-button @click="handleOrder">点击预约</el-button>
</template>
 
<script>
export default {
  methods: {
    handleOrder() {
      // 发起点餐请求
      this.axios.post('/api/order/create', {
        dishId: '123', // 菜品ID
        tableId: '456', // 桌号
        quantity: 1, // 数量
      })
      .then(response => {
        console.log('订单创建成功', response.data);
      })
      .catch(error => {
        console.error('订单创建失败', error);
      });
    }
  }
}
</script>

后端部分（Node.js + Express + MySQL）:

const express = require('express');
const router = express.Router();
const mysql = require('mysql');
 
// 连接MySQL数据库
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});
 
connection.connect();
 
// 创建订单的API接口
router.post('/api/order/create', (req, res) => {
  const dishId = req.body.dishId;
  const tableId = req.body.tableId;
  const quantity = req.body.quantity;
 
  // 插入订单到数据库
  connection.query('INSERT INTO orders (dish_id, table_id, quantity) VALUES (?, ?, ?)', [dishId, tableId, quantity], (error, results, fields) => {
    if (error) {
      return res.status(500).send('数据库错误。');
    }
    res.status(200).send('订单创建成功。');
  });
});
 
// 导出路由
module.exports = router;

这个示例展示了如何使用Node.js和Express创建一个简单的API端点来处理前端发起的点餐请求，并将数据插入到MySQL数据库中。这只是一个基础示例，实际项目中会涉及更多复杂的逻辑，例如权限验证、错误处理、分页、搜索等功能。

Element UI 是一个为 Vue.js 2.0 设计的组件库，它提供了丰富的组件，如表单、按钮、表格、布局、弹窗等。以下是一些常用的 Element UI 组件的简单示例代码。

1. 按钮（Button）

<template>
  <el-button type="primary">点击我</el-button>
</template>

2. 表单输入（Input）

<template>
  <el-input placeholder="请输入内容"></el-input>
</template>

3. 下拉菜单（Select）

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]
    };
  }
};
</script>

4. 表格（Table）

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }]
    };
  }
};
</script>

5. 对话框（Dialog）

<template>
  <el-button type="text" @click="dialogVisible = true">打开对话框</el-button>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

这些组件都是 Element UI 中的一部分，你可以在 Element UI 的官方文档中找到更多详细的使用方法和属性。

在Element UI中，<el-input>组件的type="textarea"时，如果你遇到了autoSize属性无法正常工作的问题，可能是由于以下原因：

1. 组件库版本问题：确保你使用的Element UI版本支持autosize属性。
2. CSS样式冲突：可能有其他CSS样式覆盖了组件的自动高度逻辑。
3. 使用方式错误：确保你正确地使用了autosize属性，它应该是一个对象，包含minRows和maxRows属性。

解决方法：

1. 更新Element UI：检查当前版本，确保已经是最新版本或者更高版本，以支持autosize功能。
2. 检查CSS样式：检查是否有其他CSS样式影响了<el-input>的高度计算，并相应地调整或覆盖这些样式。
3. 正确使用autosize：确保你的<el-input>组件正确设置了autosize属性，例如：

<el-input
  type="textarea"
  autosize={{ minRows: 2, maxRows: 4 }}
  v-model="text">
</el-input>

如果以上方法都不能解决问题，可以考虑查看Element UI的GitHub Issues页面，看看是否有其他开发者遇到了类似的问题，或者提交一个新的Issue来寻求帮助。

在Element UI中，如果你想要修改Dialog或MessageBox关闭按钮的悬停颜色，你可以通过CSS来覆盖默认的样式。以下是一个简单的CSS示例，用于修改悬停时关闭按钮的颜色：

/* 修改Dialog关闭按钮的悬停颜色 */
.el-dialog__headerbtn:hover {
    color: #f00; /* 将颜色改为红色 */
}
 
/* 修改MessageBox关闭按钮的悬停颜色 */
.el-message-box__headerbtn:hover {
    color: #f00; /* 将颜色改为红色 */
}

你需要将上述CSS添加到你的全局样式文件中，或者在你的组件的<style>标签中添加。这样，当用户将鼠标悬停在关闭按钮上时，按钮的颜色将会改变成红色。

请注意，.el-dialog__headerbtn:hover和.el-message-box__headerbtn:hover选择器可能需要根据你使用的Element UI版本进行调整。如果Element UI有更新或者你使用的版本不同，可能需要查询相应版本的文档或源码来找到正确的选择器。

在Vue中，可以通过创建一个组件来实现月份的多选功能。以下是一个简单的示例，展示了如何创建这样的组件：

<template>
  <div>
    <div v-for="(year, index) in years" :key="index">
      <h3>{{ year.label }}</h3>
      <div v-for="(month, monthIndex) in year.months" :key="monthIndex">
        <input
          type="checkbox"
          :id="`month-${year.value}-${month.value}`"
          :value="`${year.value}-${month.value}`"
          v-model="selectedMonths"
        />
        <label :for="`month-${year.value}-${month.value}`">{{ month.label }}</label>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      years: [
        {
          label: '2022',
          value: 2022,
          months: [
            { label: 'Jan', value: 1 },
            { label: 'Feb', value: 2 },
            // ...
            { label: 'Dec', value: 12 },
          ],
        },
        // ...
      ],
    };
  },
  computed: {
    selectedMonths: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      },
    },
  },
};
</script>

这个组件使用了一个嵌套的对象数组来表示年份和月份，并通过双向绑定(v-model)将选中的月份数组与父组件通信。用户可以选择或取消选择月份，这些变化将通过自定义事件(input)发送给父组件。在父组件中，你可以像使用任何其他v-model绑定的输入字段一样使用这个组件。

form-create 和 form-create-designer 是基于Vue的表单生成和设计器库，可以用来创建自定义表单组件。以下是如何使用这两个库创建自定义组件的简要步骤和示例代码：

1. 安装 form-create 和 form-create-designer：

npm install form-create
npm install form-create-designer

2. 在Vue项目中注册 form-create 和 form-create-designer：

import Vue from 'vue'
import formCreate from '@form-create/element-ui'
import formCreateDesigner from '@form-create/designer'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)
Vue.use(formCreate)
Vue.use(formCreateDesigner)

3. 创建自定义组件，例如一个简单的日期选择器组件：

// MyDatePicker.vue
<template>
  <el-date-picker v-model="value" type="date" placeholder="选择日期" />
</template>
 
<script>
export default {
  props: {
    value: {
      type: [String, Date],
      default: ''
    }
  }
}
</script>

4. 将自定义组件注册到 form-create：

import MyDatePicker from './MyDatePicker.vue'
 
formCreate.component('my-date-picker', MyDatePicker)

5. 使用 form-create-designer 进行表单设计，并在设计器中添加自定义组件：

<template>
  <div>
    <form-create v-model="fApi" :rule="rule" />
    <form-create-designer v-model="rule" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      fApi: {},
      rule: [
        {
          type: 'my-date-picker',
          field: 'date',
          title: '自定义日期选择器'
        }
      ]
    }
  }
}
</script>

6. 运行Vue应用，现在你可以在设计器中看到并使用自定义的日期选择器组件，同时也可以在表单中使用它。

以上是创建和使用自定义组件的基本步骤，具体实现可能会根据你的项目需求有所不同。