Vue+ElementUI笔记(1)

一、表格
1.上移、下移和移除功能

需求:有时我们会面对类似这样的表格

图中的上移,下移功能需求明显要求我们改变两行数据的顺序。在实际开发中这种功能一般由后台来做,因为列表数据一般从后台获取刷新。即是我们点击"上移",向后台请求接口,后台将数据库表格中的项交换位置,再把新的数据返回,前端拿到数据,重新刷新表格数据。

在此这篇博文仅设计到前端的数据处理及展示效果。因为我在开发过程中遇到了类似的需求,上移、下移功能不局限于表格,它也能是一个循环展示模块中的内容。

核心的JavaScript方法是:splice对数组处理方法,删除或插入内容

  • 第一个参数是目标位置
  • 第二个参数是从目标位置开始删除的元素个数,0代表不删除元素
  • 第三个参数是选择插入的内容,插入位置自然是第一个参数
  • 前两个参数必选,第三个参数可选
javascript 复制代码
<template>
  <el-table :data="tableData" border style="width: 58%">
    <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="province" label="省份" width="120"></el-table-column>
    <el-table-column prop="city" label="市区" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" width="300"></el-table-column>
    <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
    <el-table-column fixed="right" label="操作" width="150">
      <template slot-scope="scope">
        <el-button
          type="text"
          size="small"
          @click="moveUp(scope.row, scope.$index)"
          :disabled="scope.$index === 0"
        >上移</el-button>
        <!-- 这里分别展示了判断是否上移下移的两种方案 -->
        <el-button
          type="text"
          size="small"
          @click="moveDown(scope.row, scope.$index)"
          :disabled="getFormLength(scope.$index)"
        >下移</el-button>
        <el-button type="text" size="small" @click="deleteItem(scope.$index)">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "splice",

  data() {
    return {
      disabled: true,
      tableData: [
        {
          date: "2024-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "河北市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "张小龙",
          province: "深圳",
          city: "福区",
          address: "车公庙",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "李立牧",
          province: "江南",
          city: "鑫林",
          address: "南山区",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "哪吒",
          province: "普拉达",
          city: "纽约",
          address: "国家公园",
          zip: 200333,
        },
      ],
    };
  },

  methods: {
    // 上移
    moveUp(item, index) {
      this.tableData.splice(index - 1, 0, item);  // 定位到点击位置的上一行,0即不删除如何元素,在此位置插入item
      this.tableData.splice(index + 1, 1); // 此时数组中有重复元素,把原来被挤下去的元素删除
    },
    // 下移
    moveDown(item, index) {
      this.tableData.splice(index + 2, 0, item);
      this.tableData.splice(index, 1);
    },
    // 添加
     addItem() {
       let item = {
         date: "",
         name: "",
         province: "",
         city: "",
         address: "",
         zip: "",
       };
       this.tableData.push(item);
     },
    // 删除
    deleteItem(index) {
      console.log("delete");
      this.tableData.splice(index, 1);
    },
    // 控制下移按钮的显示于隐藏
    getFormLength(index) {
      if (index === this.tableData.length - 1) return true;
      else return false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
相关推荐
Devil枫13 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子1 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果2 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端