在Vue 2和Element UI中使用Sortablejs实现表格行的拖拽排序，你可以遵循以下步骤：

1. 安装Sortablejs：

npm install sortablejs --save

2. 在Vue组件中引入Sortablejs并使用：

import Sortable from 'sortablejs';
 
export default {
  data() {
    return {
      tableData: [
        // ... 填充你的数据
      ]
    };
  },
  mounted() {
    this.createSortable();
  },
  methods: {
    createSortable() {
      const el = document.querySelector('.el-table__body-wrapper tbody');
      const self = this;
      Sortable.create(el, {
        onEnd({ newIndex, oldIndex }) {
          const targetRow = self.tableData.splice(oldIndex, 1)[0];
          self.tableData.splice(newIndex, 0, targetRow);
        }
      });
    }
  }
};

3. 在模板中使用Element UI的el-table组件并确保你的表格行有唯一的key：

<template>
  <el-table :data="tableData" row-key="id">
    <!-- 你的表格列 -->
  </el-table>
</template>

确保你的表格行有唯一的key，这样Sortablejs才能正确地识别每一行。上述代码中的row-key="id"假设你的数据项中有一个唯一的"id"字段。

请注意，这只是一个基本的实现，你可能需要根据自己的需求进行相应的调整。

在Vue 2项目中，你可以使用JSX和template两种方式来封装el-table和el-pagination。以下是一个简单的示例，展示了如何封装这两个组件。

首先，确保你已经安装了Element UI并在你的项目中引入了它。

使用JSX封装

// MyTable.js
import { h, Fragment } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
 
export default {
  name: 'MyTable',
  props: {
    data: Array,
    columns: Array,
    currentPage: Number,
    pageSize: Number,
    total: Number,
  },
  render() {
    const { data, columns, currentPage, pageSize, total } = this;
 
    return (
      <Fragment>
        <ElTable data={data} style="width: 100%">
          {columns.map(column => (
            <ElTableColumn {...column} />
          ))}
        </ElTable>
        <ElPagination
          currentPage={currentPage}
          pageSize={pageSize}
          total={total}
          onCurrentChange={this.handlePageChange}
        />
      </Fragment>
    );
  },
  methods: {
    handlePageChange(newPage) {
      this.$emit('page-change', newPage);
    },
  },
};

使用template封装

<template>
  <div>
    <el-table :data="data" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      ></el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>
 
<script>
export default {
  name: 'MyTable',
  props: {
    data: Array,
    columns: Array,
    currentPage: Number,
    pageSize: Number,
    total: Number,
  },
  methods: {
    handlePageChange(newPage) {
      this.$emit('update:currentPage', newPage);
      this.$emit('page-change', newPage);
    },
  },
};
</script>

在上述两个例子中，我们创建了一个名为MyTable的组件，它接收data、columns、currentPage、pageSize和total作为props，并且能够更新当前页面和处理页面改变的事件。在JSX示例中，我们使用了React-like的JSX语法来渲染组件，而在template示例中，我们使用了Vue标准的template语法。你可以根据自己的喜好选择使用哪种方式来封装你的组件。

由于提供的信息不足以准确理解问题，我将提供一个使用Node.js, Vue, 和 Element UI创建的天气预报管理系统的大致框架。这个系统将包括用户登录、天气数据查看、以及可能的管理员功能，但不包括具体的业务逻辑实现，如数据库连接、权限控制等。

后端（Node.js 和 Express）

const express = require('express');
const app = express();
const port = 3000;
 
// 中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
 
// 路由
app.get('/weather', (req, res) => {
  // 获取天气信息的逻辑
  res.send({
    temperature: 22,
    description: 'sunny'
    // 其他天气信息
  });
});
 
// 启动服务器
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

前端（Vue 和 Element UI）

<template>
  <div>
    <el-button @click="fetchWeather">获取天气</el-button>
    <p>温度: {{ weather.temperature }}°C</p>
    <p>天气: {{ weather.description }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      weather: {}
    };
  },
  methods: {
    fetchWeather() {
      fetch('http://localhost:3000/weather')
        .then(response => response.json())
        .then(data => {
          this.weather = data;
        })
        .catch(error => console.error('Error:', error));
    }
  }
};
</script>

这个简单的例子展示了如何使用Vue和Element UI创建一个前端应用，以及如何使用Express和Node.js创建一个后端API。前端应用通过API获取天气数据，并使用Element UI组件展示。后端API提供一个获取天气信息的接口，并简单返回模拟数据。

在实际应用中，你需要实现数据库连接、权限控制、以及与外部天气API的集成。这个框架可以作为开始，但你需要根据具体需求进行扩展和完善。

前后端分离的艺品管理系统是一个复杂的项目，涉及到前后端的协作和数据交换。以下是一个简化的例子，展示如何使用Node.js（使用Express框架）和Vue（结合Element UI）创建一个艺品管理系统的基本框架。

后端（Node.js + Express）:

const express = require('express');
const app = express();
const port = 3000;
 
// 用于与前端交换JSON数据
app.use(express.json());
 
// 一个简单的艺品信息路由
app.get('/artworks', (req, res) => {
  const artworks = [
    { id: 1, name: '画作1' },
    { id: 2, name: '画作2' }
  ];
  res.json(artworks);
});
 
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

前端（Vue + Element UI）:

<template>
  <div>
    <el-button @click="fetchArtworks">加载艺品</el-button>
    <el-table :data="artworks" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="艺品名称"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { ElButton, ElTable, ElTableColumn } from 'element-plus';
import axios from 'axios';
 
export default {
  components: {
    ElButton,
    ElTable,
    ElTableColumn
  },
  setup() {
    const artworks = ref([]);
 
    const fetchArtworks = async () => {
      try {
        const response = await axios.get('http://localhost:3000/artworks');
        artworks.value = response.data;
      } catch (error) {
        console.error('Error fetching artworks:', error);
      }
    };
 
    return { artworks, fetchArtworks };
  }
};
</script>

在这个例子中，前端Vue应用使用Element UI组件库来构建用户界面，并通过axios发送HTTP请求从后端获取艺品数据。后端Express服务器提供了一个API端点/artworks，用于返回艺品信息。

这个例子展示了前后端如何通过HTTP进行数据交换，并且在实际应用中，你需要实现更多的路由、数据库交互、用户认证等功能。

在Node.js和Vue.js环境下，使用Element UI创建一个音乐推荐系统涉及后端和前端的开发。以下是一个简化的示例，展示了如何实现一个音乐推荐系统的核心功能。

后端（Node.js 和 Express）

安装依赖:

npm install express mongoose

创建一个简单的音乐推荐模型（recommendation.js）:

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
 
const RecommendationSchema = new Schema({
  userId: String,
  songId: String,
  score: Number
});
 
module.exports = mongoose.model('Recommendation', RecommendationSchema);

创建一个简单的API路由（routes/recommendations.js）:

const express = require('express');
const router = express.Router();
const Recommendation = require('../models/recommendation');
 
router.get('/', async (req, res) => {
  try {
    const recommendations = await Recommendation.find().sort({ score: -1 });
    res.json(recommendations);
  } catch (err) {
    res.status(500).send('Error fetching recommendations.');
  }
});
 
module.exports = router;

前端（Vue.js）

安装依赖:

npm install axios

在Vue组件中获取推荐歌曲（MusicRecommendation.vue）:

<template>
  <div>
    <el-table :data="recommendations" style="width: 100%">
      <el-table-column prop="songId" label="Song ID"></el-table-column>
      <el-table-column prop="score" label="Score"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      recommendations: []
    };
  },
  created() {
    this.fetchRecommendations();
  },
  methods: {
    async fetchRecommendations() {
      try {
        const response = await axios.get('/api/recommendations');
        this.recommendations = response.data;
      } catch (error) {
        console.error('Error fetching recommendations:', error);
      }
    }
  }
};
</script>

确保你的Vue项目能够通过API与后端通讯，并且在index.html中引入了Element UI。

注意：以上代码示例仅展示了如何获取推荐歌曲列表，并未包含具体的协同过滤实现。协同过滤算法通常涉及用户-物品评分矩阵、相似度计算、推荐生成等步骤，具体实现会根据所使用的算法（例如基于用户的协同过滤、基于物品的协同过滤、矩阵分解等）而有所不同。

在实际应用中，你还需要实现注册、登录、个性化设置、音乐数据的收集和存储等功能，并且可能需要使用数据库（如MongoDB）来存储用户信息、音乐信息和推荐结果。同时，你还需要实现前端界面的用户交互，比如音乐播放、个人喜好设置、推荐结果个性化设置等功能。

以下是一个简化的示例，展示如何使用Node.js、Vue和Element UI创建一个简单的游戏玩家账号租赁交易系统的前端部分。

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-input v-model="searchQuery" placeholder="请输入搜索内容"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="searchAccounts">搜索账号</el-button>
      </el-col>
    </el-row>
    <el-table :data="accountList" style="width: 100%">
      <el-table-column prop="accountId" label="账号ID"></el-table-column>
      <el-table-column prop="accountName" label="账号名称"></el-table-column>
      <el-table-column prop="serverName" label="所在服务器"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleRent(scope.row)">租赁</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '',
      accountList: []
    };
  },
  methods: {
    searchAccounts() {
      // 模拟发起搜索请求
      this.accountList = [
        // 假设的账号数据
        { accountId: '123', accountName: '玩家1', serverName: '神魔2服' }
      ];
    },
    handleRent(row) {
      // 模拟账号租赁逻辑
      console.log(`账号${row.accountId}已经被租赁。`);
      // 可能需要发起后端请求处理账号租赁
    }
  }
};
</script>

这个简单的Vue组件包含了一个搜索框和一个表格，用于展示搜索到的游戏账号。表格中有一列操作按钮，用于处理账号的租赁。这个例子演示了如何使用Element UI组件和Vue的数据绑定来创建用户界面，并提供了简单的方法来处理用户事件。在实际应用中，你需要将模拟的账号数据请求替换为实际的API请求，并处理账号租赁的逻辑。

您提供的信息不足以准确地诊断问题，因为提供的错误代码 nodejs+vue+ElementUi摄影预约服务网站系统91f0v 看起来像是一个系统的标识而不是具体的错误信息。但我可以提供一个基本的Node.js + Vue + Element UI的项目搭建指南。

1. 确保你已经安装了Node.js和npm。

2. 使用Vue CLI创建一个新项目:

   
   
   
   vue create photoshop-app

3. 进入新建的项目目录:

   
   
   
   cd photoshop-app

4. 添加Element UI库:

   
   
   
   vue add element

5. 修改Vue组件，使用Element UI组件。
6. 配置API接口，使用axios等库与后端API通信。
7. 编写后端服务，提供预约相关的API接口。

这是一个非常基础的指南，具体实现会依赖于你的需求和系统设计。如果你有具体的错误信息或需求，我可以提供更详细的帮助。

由于提问中包含了多个关键词，并且没有明确的问题描述，我将提供一个基于Vue.js、ElementUI和Spring Boot创建高校校园外卖点餐系统的商家管理界面的简化示例。

假设我们需要创建一个商家页面，其中包括商家信息的展示和修改功能。

首先，我们需要在Vue组件中定义商家页面的布局和逻辑：

<template>
  <div>
    <h2>商家信息</h2>
    <el-form label-width="120px">
      <el-form-item label="商家名称">
        <el-input v-model="restaurant.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="restaurant.phone" readonly></el-input>
      </el-form-item>
      <el-form-item label="商家地址">
        <el-input v-model="restaurant.address" readonly></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editRestaurant">编辑商家信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      restaurant: {
        name: '商家A',
        phone: '123456789',
        address: '校园中路1号'
      }
    };
  },
  methods: {
    editRestaurant() {
      // 跳转到编辑页面，这里需要结合实际的路由配置
      this.$router.push({ name: 'edit-restaurant' });
    }
  }
};
</script>

在上述代码中，我们使用ElementUI的<el-form>组件来展示商家信息，并通过v-model进行数据绑定。readonly属性用于设置输入框为只读状态，防止商家信息被修改。editRestaurant方法用于处理编辑商家信息的逻辑，它通过Vue Router进行页面跳转。

注意：这只是一个非常简化的示例，实际的应用中需要与后端服务（Spring Boot）进行数据交互，并且需要配置Vue Router来处理页面的路由跳转。

后端服务（Spring Boot）的实现细节将取决于具体的业务需求和后端技术栈。在这里，我们不展开详细讨论。

由于提供的代码已经相对完整，我们可以直接参考其结构和代码来构建一个简化版的示例。以下是一个基于提供的代码结构的简化版前端Home.vue组件的示例：

<template>
  <div class="home">
    <el-carousel indicator-position="outside" :interval="5000" height="400px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in 4" :key="item" class="recipe-card">
        <el-card :body-style="{ padding: '0px' }" class="recipe-card-content">
          <img src="https://placehold.it/300x200" class="image">
          <div style="padding: 14px;">
            <span>美食名称</span>
            <div class="bottom clearfix">
              <time class="time">发布时间</time>
              <el-button type="text" class="button">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  name: 'Home',
  // 这里可以添加更多的组件逻辑
};
</script>
 
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}
 
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
 
.button {
  padding: 0;
  float: right;
}
 
.image {
  width: 100%;
  display: block;
}
 
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
 
.clearfix:after {
  clear: both;
}
 
.recipe-card {
  margin-bottom: 10px;
}
</style>

这个示例提供了一个简单的家庭菜谱网站的首页展示，包括一个轮播图展示最新的菜谱，以及一个卡片组来展示热门菜谱。样式和布局都非常简单，主要是为了展示如何组合使用Element UI的组件。在实际应用中，您需要将轮播图和卡片内容替换为从后端API获取的实际数据。

由于提供的链接是一个网站的部分URL，并不是一个可以直接访问的链接，也不是一个可以共享的完整项目代码，因此无法提供具体的代码实例。如果您有具体的代码实现问题或者想要了解如何使用Node.js、Vue和Element UI创建一个图书馆座位管理系统的部分，欢迎提出具体的技术问题。