解决Element-UI el-table show-summary合计行不显示的问题，通常是由于以下几个原因造成的：

1. 确保你已经在el-table上设置了show-summary属性为true。
2. 确保你的el-table-column上设置了prop属性，并且这个属性与你数据源中的字段名称匹配。
3. 确保你的数据源中有数据，因为合计是基于数据计算的。

以下是一个简单的示例代码，演示如何设置合计行：

<template>
  <el-table
    :data="tableData"
    show-summary
    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-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        // ... 确保你的数据源中有数据
      ]
    };
  }
};
</script>

如果以上都设置正确，合计行应该会显示。如果问题依然存在，请检查是否有其他的CSS或JavaScript影响了表格的渲染，或者检查是否有Element-UI的版本兼容性问题。

在Element Plus中，要实现时间选择器el-date-picker组件只能选择当前天及之前30天内的日期，可以通过设置disabledDate属性来实现。以下是一个简单的代码示例：

<template>
  <el-date-picker
    v-model="value"
    type="date"
    :disabled-date="disabledDate"
    placeholder="选择日期">
  </el-date-picker>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const value = ref('');
 
    const disabledDate = (time) => {
      // 获取30天前的日期
      const thirtyDaysAgo = new Date();
      thirtyDaysAgo.setTime(thirtyDaysAgo.getTime() - 30 * 24 * 60 * 60 * 1000);
 
      // 禁用今天之后的日期，并且还禁用了30天之后的日期
      return time.getTime() > Date.now() || time.getTime() < thirtyDaysAgo.getTime();
    };
 
    return {
      value,
      disabledDate,
    };
  },
};
</script>

在这个示例中，disabledDate函数定义了不可选择的日期范围。它通过比较当前时间和选择的日期来判断是否禁用该日期。如果选择的日期在当前日期之后或在30天前的日期之前，disabledDate函数返回true，表示该日期不可选择。

<template>
  <div>
    <el-button icon="el-icon-plus" @click="addInput">增加</el-button>
    <el-button icon="el-icon-minus" @click="removeInput" :disabled="inputCount <= 1">减少</el-button>
    <div v-for="i in inputCount" :key="i">
      <el-input v-model="inputs[i - 1]" placeholder="请输入内容"></el-input>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputCount: 1,
      inputs: ['']
    };
  },
  methods: {
    addInput() {
      this.inputCount++;
      this.inputs.push('');
    },
    removeInput() {
      if (this.inputCount > 1) {
        this.inputCount--;
        this.inputs.pop();
      }
    }
  }
};
</script>

这段代码使用了Vue.js和Element UI来实现一个动态增减input框的功能。用户可以点击“增加”按钮来添加新的input框，同时可以点击“减少”按钮来删除已有的input框，但不允许减少到少于1个input框。每个input框都绑定了一个数组的元素，数组长度动态反映当前input的数量。

在Element UI中，折叠面板（Collapse）组件的箭头图标默认是在标题内容的最右边。如果你想要调整这个图标的位置，使它出现在最左边，你可以通过自定义样式来实现。

以下是一个简单的例子，展示如何通过CSS样式来调整折叠面板箭头的位置：

<template>
  <el-collapse class="adjusted-arrow-position">
    <el-collapse-item title="标题一">
      <div>内容一</div>
    </el-collapse-item>
    <el-collapse-item title="标题二">
      <div>内容二</div>
    </el-collapse-item>
  </el-collapse>
</template>
 
<style>
/* 调整箭头位置到最左边 */
.adjusted-arrow-position .el-collapse-item__header {
  justify-content: flex-start;
}
 
/* 如果箭头后还有其他内容，可以通过这个类来调整它们的位置 */
.adjusted-arrow-position .el-collapse-item__arrow {
  margin-right: 0;
  order: -1; /* 将箭头元素排在前面 */
}
 
/* 如果你想要在标题内容中保留一定宽度供箭头图标展示，可以添加一些左内边距 */
.adjusted-arrow-position .el-collapse-item__content {
  padding-left: 24px; /* 这个值根据你的需求和设计调整 */
}
</style>

在这个例子中，.adjusted-arrow-position 类用于选择折叠面板，然后通过CSS样式调整箭头的位置。justify-content: flex-start; 确保了箭头在容器中对齐到最左边。order: -1; 则将箭头元素的顺序设置为最高，确保它出现在最左边。同时，可能需要适当调整内容的padding-left，以保证在有箭头的情况下内容显示不错。

在Element UI中，可以通过CSS覆盖默认的边框样式来修改el-table的边框。如果你想要设置透明背景，可以将el-table放置在具有透明背景的容器中。

以下是一个简单的例子，展示如何通过CSS修改el-table的边框样式：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    class="custom-table"
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ]
    };
  }
};
</script>
 
<style>
/* 修改表格边框样式 */
.custom-table .el-table__row,
.custom-table .el-table th {
  border: 1px solid #d3dce6; /* 修改为你想要的颜色或宽度 */
}
 
/* 如果需要透明背景 */
.transparent-background {
  background-color: transparent;
}
</style>

在上面的代码中，.custom-table 类被用来定义自定义的表格样式。你可以修改.custom-table选择器中的border属性来改变边框的颜色和宽度。如果你想要透明背景，可以给el-table添加transparent-background类，并在CSS中定义该类的背景色为透明。

请注意，Element UI的边框样式可能会涉及到多个CSS选择器，你可能需要覆盖多个选择器来确保边框的一致性。

首先确保你已经安装了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>元素上。