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>
相关推荐
霍先生的虚拟宇宙网络10 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing12 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
彪82513 分钟前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
jessezappy30 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐1 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave2 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习