首先确保你已经安装了Vue CLI。如果没有安装，可以通过以下命令安装：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

然后，创建一个新的Vue 2项目：

vue create my-vue2-project

在创建项目的过程中，选择Vue 2作为你的预设。

接下来，进入项目目录：

cd my-vue2-project

安装axios：

npm install axios --save
# 或者
yarn add axios

安装Element UI：

npm install element-ui --save
# 或者
yarn add element-ui

在main.js中引入Element UI和axios：

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
 
Vue.use(ElementUI);
Vue.prototype.$axios = axios;
 
new Vue({
  render: h => h(App),
}).$mount('#app');

现在你的Vue 2项目已经配置好了axios和Element UI，可以开始开发了。

在Vue 3和Element Plus中，要设置表格（el-table）自动滚动，可以使用CSS样式或Element Plus的属性。

使用CSS样式，可以为表格外层容器设置固定高度并开启滚动：

<template>
  <el-table
    :data="tableData"
    height="200" <!-- 设置固定高度 -->
    style="overflow-y: auto;" <!-- 开启滚动 -->
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue'
 
const tableData = ref([
  // 数据
])
</script>
 
<style>
.el-table__body-wrapper {
  overflow-y: auto !important;
}
</style>

使用Element Plus的属性，可以利用max-height属性设置表格的最大高度，这样当数据溢出时表格会自动显示滚动条：

<template>
  <el-table
    :data="tableData"
    max-height="200" <!-- 设置最大高度 -->
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue'
 
const tableData = ref([
  // 数据
])
</script>

以上两种方式都可以实现表格的自动滚动。选择其中一种根据实际需求应用即可。

由于提供整个Django + Vue + ElementUI管理后台的源代码超出了问答的字数限制，我将提供一个简化的例子来说明如何使用Django作为后端和Vue + ElementUI作为前端构建一个简单的管理后台界面。

假设我们要创建一个用户管理界面，后端提供API，前端使用Vue和ElementUI进行交互。

后端(Django):

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from .models import User
 
@require_http_methods(["GET"])
def get_users(request):
    users = User.objects.all()
    return JsonResponse({'users': list(users.values())}, safe=False)
 
@require_http_methods(["POST"])
def create_user(request):
    data = JSONParser().parse(request)
    user = User.objects.create(**data)
    return JsonResponse({'user': user.to_dict()})

前端(Vue + ElementUI):

<!-- UserList.vue -->
<template>
  <el-table :data="users" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="username" label="Username" width="180"></el-table-column>
    <el-table-column label="Operations">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      this.$http.get('api/users/').then(response => {
        this.users = response.body.users;
      });
    },
    handleEdit(index, row) {
      // 编辑用户逻辑
    },
    handleDelete(index, row) {
      // 删除用户逻辑
    }
  }
};
</script>

这个例子展示了如何使用Django作为后端提供API接口，以及如何在Vue组件中使用ElementUI来展示用户列表和操作按钮。这个简单的例子旨在展示如何将两者结合起来，并不包含完整的业务逻辑和错误处理。

报错信息提示："package.json must be actual JSON, not just JavaScript"，意味着package.json文件中的内容不是有效的JSON格式，而是可能包含了JavaScript代码或者语法错误。

解决方法：

1. 打开package.json文件。
2. 检查文件内的JSON格式是否正确，例如是否有未闭合的引号、错误的逗号、使用了单引号而不是双引号等。
3. 如果发现有JavaScript代码，例如变量声明、函数定义等，需要将它们移动到相应的.js文件中。
4. 确保package.json中的JSON数据结构是正确的，例如所有的键值对都是由逗号分隔，并且最后一个键值对不以逗号结尾。
5. 使用在线JSON验证工具检查package.json的JSON格式是否正确。
6. 保存package.json文件后，重新尝试安装Element UI。

如果问题依然存在，请提供更详细的错误信息和上下文，以便进一步诊断问题。

在Element UI和Element Plus中，要设置表格的表头和单元格居中，可以通过设置表格的样式来实现。以下是一个简单的例子，演示如何使用CSS来居中表头和单元格。

首先，确保你已经正确安装并引入了Element UI或Element Plus。

然后，在你的Vue组件中，你可以添加以下的样式代码：

<style scoped>
.el-table th,
.el-table td {
  text-align: center; /* 设置文字居中 */
  vertical-align: middle; /* 设置垂直居中 */
}
</style>

接着，在模板部分，你只需要正常使用Element UI或Element Plus的<el-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: [
        // ... 填充你的数据
      ]
    };
  }
};
</script>

在这个例子中，.el-table th, .el-table td选择器会选中所有的表头和单元格，然后通过设置text-align: center;和vertical-align: middle;来实现居中。由于我们使用了scoped属性，所以这些样式只会应用到当前组件内的<el-table>元素上。

在Element UI中，可以通过default-active属性来设置导航菜单的默认展开项。如果你想要默认展开子菜单，你需要设置default-active为子菜单对应的index值。

以下是一个简单的例子，展示如何使用Element UI的导航菜单组件，并默认展开子菜单：

<template>
  <el-menu :default-active="'2-1'">
    <el-submenu index="2">
      <template slot="title">导航二</template>
      <el-menu-item index="2-1">选项2-1</el-menu-item>
      <el-menu-item index="2-2">选项2-2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">导航三</el-menu-item>
  </el-menu>
</template>
 
<script>
export default {
  // 你的组件数据和方法
};
</script>

在这个例子中，<el-menu> 组件的 default-active 属性被设置为 '2-1'，这表示当组件初始化时，索引为 '2-1' 的子菜单项（即“导航二”下的“选项2-1”）将默认展开。

请注意，index 值必须与你的菜单项的 index 值对应，以确保正确的子菜单项被默认展开。

在Element UI中，可以使用<el-tree>组件来创建树形表格，并通过<el-button>组件来实现全部展开和收起的功能。以下是实现这一功能的示例代码：

<template>
  <div>
    <el-button @click="toggleTree(true)">全部展开</el-button>
    <el-button @click="toggleTree(false)">全部收起</el-button>
    <el-tree
      :data="data"
      :props="defaultProps"
      ref="tree"
      accordion>
    </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // 树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    toggleTree(expanded) {
      this.$refs.tree.root.doCreateChildren(this.$refs.tree.root.childNodes, expanded);
      this.$refs.tree.root.expanded = expanded;
    }
  }
};
</script>

在这个例子中，toggleTree方法接受一个布尔值参数expanded，表示是否要展开（true）或收起（false）。this.$refs.tree.root获取到树的根节点，doCreateChildren方法用于创建或更新子节点，并设置expanded属性来实现展开或收起所有节点。

在前端使用Vue和elementUI时，可以结合axios库进行文件的直传操作。以下是一个简化的示例，展示了如何使用axios进行带有进度条的文件上传到OSS（阿里云对象存储）：

1. 安装axios：

npm install axios

2. 在Vue组件中使用axios上传文件：

<template>
  <el-upload
    action="上传的服务器端点"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
  </el-upload>
</template>
 
<script>
import axios from 'axios';
 
export default {
  methods: {
    handleProgress(event, file) {
      // 这里可以获取上传进度，更新进度条
      console.log(`进度: ${event.percent}`);
    },
    handleSuccess(response, file, fileList) {
      // 上传成功处理
      console.log('上传成功', response);
    },
    handleError(err, file, fileList) {
      // 上传失败处理
      console.error('上传失败', err);
    },
  },
};
</script>

3. 服务器端签名逻辑：

@RestController
public class OssController {
 
    @GetMapping("/getSignature")
    public ResponseEntity<Map<String, String>> getSignature() {
        // 这里应该是服务端根据业务逻辑生成签名的代码
        Map<String, String> responseData = new HashMap<>();
        responseData.put("accessKeyId", "你的AccessKeyId");
        responseData.put("policy", "你的Policy");
        responseData.put("signature", "你的签名");
        // 其他必要的参数
        return ResponseEntity.ok(responseData);
    }
}

注意：实际的签名生成逻辑需要根据阿里云OSS的要求来编写，并确保安全性。

以上代码提供了一个简单的示例，展示了如何使用Vue和elementUI的<el-upload>组件进行文件上传，并且如何在上传过程中使用axios获取进度信息。服务器端需要提供一个API来返回签名信息，前端将使用这些签名信息来进行直传。

在Vue2项目中，可以通过二次封装Element UI的el-dialog组件来创建一个弹窗。以下是一个简单的例子：

1. 创建一个新的组件MyDialog.vue:

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :before-close="handleClose">
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  props: {
    title: String,
    width: String,
    visible: Boolean
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleConfirm() {
      this.$emit('confirm');
      this.handleClose();
    }
  }
};
</script>

2. 在父组件中使用MyDialog组件：

<template>
  <div>
    <my-dialog
      :title="dialogTitle"
      :width="'30%'"
      :visible="dialogVisible"
      @update:visible="value => dialogVisible = value"
      @confirm="handleConfirm">
      <!-- 这里放置你的内容 -->
      <p>这里是弹窗内容</p>
    </my-dialog>
  </div>
</template>
 
<script>
import MyDialog from './MyDialog.vue';
 
export default {
  components: {
    MyDialog
  },
  data() {
    return {
      dialogTitle: '提示',
      dialogVisible: false
    };
  },
  methods: {
    handleConfirm() {
      // 处理确认事件
      console.log('确认操作');
    }
  }
};
</script>

在这个例子中，MyDialog组件接收title、width和visible作为props，并且定义了一个handleClose方法来关闭弹窗，以及一个handleConfirm方法来处理确认事件。父组件通过dialogVisible控制弹窗的显示与隐藏，并在handleConfirm方法中处理用户的确认操作。

在Vue中使用Element UI的el-tabs组件时，可以通过监听标签的双击事件来实现可编辑的标签名称。以下是一个简单的实现示例：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      <span slot="label" @dblclick="handleDoubleClick(item)">
        {{ item.title }}
        <i v-if="item.edit" class="el-icon-edit"></i>
      </span>
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: '1',
      editableTabs: [
        { title: 'Tab 1', name: '1', edit: false },
        { title: 'Tab 2', name: '2', edit: false },
        // more tabs...
      ],
      currentTab: null,
    };
  },
  methods: {
    handleDoubleClick(item) {
      this.currentTab = item;
      item.edit = true;
      this.$nextTick(() => {
        const input = this.$el.querySelector('.el-tabs__nav .is-active .edit-input');
        input.focus();
      });
    },
    handleClick(tab, event) {
      if (this.currentTab && !this.currentTab.edit) {
        this.currentTab = null;
      }
    }
  }
};
</script>
 
<style scoped>
.edit-input {
  width: 80px;
  margin-left: 5px;
}
</style>

在这个示例中，我们定义了一个editableTabs数组来存储标签的信息。每个标签对象中的edit属性用来标识该标签是否处于编辑状态。在handleDoubleClick方法中，我们将双击的标签对象的edit属性设置为true，并在Vue的下一个更新循环中，通过this.$el.querySelector获取到编辑输入框并将焦点设置到输入框。在handleClick方法中，我们处理了标签的点击事件，如果当前标签不是处于编辑状态，我们将currentTab设置为null。