前端基于VUE+ElementUI实现table行上移或下移(支持跨页移动)

阅读本书更多章节>>>>

最近在做后台管理遇见了一个这样的需求：table列表需要支持上下移动数据，并且也需要满足跨页移动，前端把数据移动整理之后，提交给后端进行保存（平常这种数据移动都是调用后端的接口，然后在查询数据就可以完成了，但是这次显然不能这么做，因为后端只有一个保存数据的接口，所以这就需要前端自己处理数据了，废话少说，上效果图和源码！

静态效果图

动态效果图
实现源码（HTML）

  <el-table :data="paginatedData">    <el-table-column label="操作" prop="operate">      <template slot-scope="scope">        <el-button-group>          <el-button            title="下移"            :disabled="isDown(scope.row)"            @click="moveupOrmovedown(scope.row, scope.$index, 'down')"          >          </el-button>          <el-button            title="上移"            :disabled="scope.$index === 0 && currentPage === 1"            @click="moveupOrmovedown(scope.row, scope.$index, 'up')"          >          </el-button>        </el-button-group>      </template>    </el-table-column>  </el-table>  <!-- 页码参考（此处不涉及该功能的任何逻辑，可忽略 -->  <el-pagination     background     :page-size="pageSize"     :current-page="currentPage"     layout="total, prev, pager, next, jumper"     :total="totalSize"     @current-change="(val) => (currentPage = val)"   > </el-pagination>

实现源码（JS）

   moveupOrmovedown(row, index, type) {     let arr = this.filteredData     const findIndex = this.filteredData.findIndex(       (item) => item.date === row.date     )     index = findIndex > this.pageSize - 1 ? findIndex : index     type === 'up'       ? arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))       : arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))   }

详情源码(仅展示参数)

<script>export default {  data() {    return {      totalSize: 0,      currentPage: 1,      pageSize: 10,      filteredData: [],      paginatedData: [],      tableData: []    }  },  methods: {    isDown(row) {      const findIndex = this.filteredData.findIndex(        (item) => item.date === row.date      )      return findIndex === this.filteredData.length - 1     },    moveupOrmovedown(row, index, type) {      let arr = this.filteredData      const findIndex = this.filteredData.findIndex(        (item) => item.date === row.date      )      index = findIndex > this.pageSize - 1 ? findIndex : index      type === 'up'        ? arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))        : arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))    },    handleCurrentChange(val) {      this.currentPage = val    },    selectCheckBox(selectCheckBox) {      const newFilterData = this.filterDataByDate(        this.tableData,        selectCheckBox      )      this.filteredData = [...this.filteredData, ...newFilterData]    },    paginateData(data, pageSize, currentPage) {      if (data.length < 11) return data      const startIndex = (currentPage - 1) * pageSize      const endIndex = startIndex + pageSize      const dataToShow = data.slice(startIndex, endIndex)      return dataToShow    },    updatePaginatedData() {      this.totalSize = this.filteredData.length      // 分页(前端处理)     // this.paginatedData = this.$util.paginateData(      this.paginatedData = this.paginateData(        this.filteredData,        this.pageSize,        this.currentPage      )    }  },  created() {    // 调后端接口返回的全部数据(后面前端自己分页)    this.tableData = tableData  },  mounted() {},  watch: {    currentPage: {      handler(newPage) {        this.updatePaginatedData()      },      immediate: true,    },    filteredData: {      handler(newArray) {        this.updatePaginatedData()      },      immediate: true,    }  },  computed: {},  filters: {}}</script>

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-26/162420.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！