若依框架 - 前端后端分离 vue element 组件模板 el-table 表格点击式可编辑表格 - 分页跳转回显（保存上一次的选择）- 按钮式可编辑表格- 弹窗表格 el-table 滚动条设置

Dear 丶 2024-03-24 15:32 3阅读 0赞

#### 目录 ####

*  1、表格点击式可编辑表格 el-table
 *  参考链接
 *  2、分页跳转保存上一次的选择（回显）
 *  参考链接
 *  3、按钮式可编辑表格
 *  参考链接
 *  4、弹窗表格 el-table 滚动条设置
 *  参考链接

## 1、表格点击式可编辑表格 el-table ##

效果演示：

![在这里插入图片描述][3cd3d055e537499f8f9ff3ca8ff1ca46.png]  
![在这里插入图片描述][fae3a4e5810f4f85a82f6c16e69a3194.png]

`xxx.vue` 文件模板 ：

<template>
    <el-table
          height="450"
          v-loading="loading"
          :data="dataList"
          element-loading-text="拼命加载中"
          @cell-click="handleCurrentChange"
        >
          <el-table-column type="selection" width="55"
                           :reserve-selection="true"
                           align="center" />
    <el-table-column
            label="测试列"
            :show-overflow-tooltip="true"
            prop="test"
            width="200"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
            align="center"
          >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.isEdit"
                  ref="gain"
                  v-model="scope.row.test"
                  @blur="handleEdit(scope)"
                />                 
                <span v-else>{
        {
         scope.row.test }}</span>
              </template>
    
          </el-table-column>
        </el-table>
    </template>
    
    <script>
    import {
        
    	datalist,
    } from "@/api/test";
    
    export default {
        
    data() {
        
        return {
        
          total: 0,
          // 当前页面的行数据
          dataList: [],
          // 弹出层标题
          title: "",
          // 开始自定义变量 ！！！
          multipleSelection: [],
        };
      },
    methods: {
        
        handleCurrentChange(row, event, cell, column) {
        //显示文本框
          if (event.label === '测试列') {
        
            this.$set(row, 'isEdit', true)  /** 是一个循环匹配是否编辑，即是否
            									显示输入框的状态 */
          } else{
        
            return false
          }
          this.$nextTick(() => {
        
            this.$refs.gain.focus()   /**显示文本框并获取焦点，必须有该配置，
            							不然点击外面都不会将输入框隐藏 */
          })
        },
        handleEdit({
          row, column }){
          //隐藏文本框
          if (column.label === '测试列') {
        
            console.log("------------ 测试列 row", row)
            this.changeData(row)
            this.$set(row, 'isEdit', false)   /** 配置为响应式对象 
            									其实就是额外添加参数 isEdit*/
          }
        },
        /** 查询列表 */
        getList() {
        
          this.loading = true;
          /** datalist 是一个 api 路由 获取后端数据  addDateRange 
          不用管，只是若依框架的一个添加额外参数的方法 */
          datalist(this.addDateRange(this.queryParams, this.dateRange)).then(
            (response) => {
        
              this.dataList = response.rows;   /** 返回的数据 */
              this.loading = false;
              this.dataList.forEach(item => {
        
                this.$set(item, 'isEdit', false);    // 默认测试列每一行的输入框都是是隐藏状态
              });
          );
        })
        }
    }
    }
    <script>

## 参考链接 ##

[1. element-ui表格编辑][1. element-ui]

[2. Element-UI实现可编辑的表格][2. Element-UI]

## 2、分页跳转保存上一次的选择（回显） ##

`xxx.vue` 文件模板 ：

<template>
    <el-table
          height="450"
          v-loading="loading"
          :data="dataList"
          :row-key="getRowKey"
          :data="dataList"
          ref="multipleTable"
          @select="handleCheckBox"
          @select-all="handleSelectAll"
        >
          <el-table-column type="selection" width="55"
                           :reserve-selection="true"
                           align="center" />
    <el-table-column
            label="测试列"
            :show-overflow-tooltip="true"
            prop="test"
            width="200"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
            align="center"
          >
          </el-table-column>
        </el-table>
    </template>
    
    
    <script>
    import {
        
    	datalist,
    } from "@/api/test";
    
    export default {
        
    data() {
        
        return {
        
          // 总条数
          total: 0,
          // 当前页面的行数据
          dataList: [],
          // 弹出层标题
          title: "",
            // 开始自定义变量 ！！！
            multipleSelection: [],
        };
      },
    methods: {
        
        getRowKey (row) {
             // 获取勾选的那一行数据的 id 可以执行导出订单功能
          return row.test_id;  // 可以指定任何具有唯一性的字段 xxx_id
        },
            //该方法是单选时的方法
        handleCheckBox(rows, row) {
        
          if (this.multipleSelection.find((item) => item == row.test_id)) {
        
            //下面这个filter方法就是删除的方法
            this.multipleSelection = this.multipleSelection.filter(
              (item) => item != row.test_id     // 可以指定任何具有唯一性的字段 xxx_id
            );
          } else {
        
            this.multipleSelection.push(row.test_id);
          }
        },
        //该方法是当页全选的方法
        handleSelectAll(rows) {
        
          if (rows.length) {
        
            rows.forEach((row) => {
        
              if (!this.multipleSelection.find((item) => item == row.test_id)) {
        
                this.multipleSelection.push(row.test_id);
              }
            });
          } else {
        
            this.dataList.forEach((row) => {
        
              this.multipleSelection = this.multipleSelection.filter(
                (item) => item != row.test_id
              );
            });
          }
        },
        /** 查询列表 */
        getList() {
        
          this.loading = true;
          /** datalist 是一个 api 路由 获取后端数据  addDateRange 
          不用管，只是若依框架的一个添加额外参数的方法 */
          datalist(this.addDateRange(this.queryParams, this.dateRange)).then(
            (response) => {
        
              this.dataList= response.rows;
              this.loading = false;
              // 分页后回显功能
              this.$nextTick(()=>{
        
                this.dataList.forEach((item,index)=>{
        
                  if(this.multipleSelection.findIndex(v=>v == item.test_id) >= 0){
        
                    this.$refs.multipleTable.toggleRowSelection( /** 这里一行都不用改 */
                      this.$refs.multipleTable.data[index],   /** 这里一行都不用改 */
                      true                   /** 这里一行都不用改 */
                    );
                  }
                })
              }
            // 分页后回显功能
          );
        })
        }  /** 查询列表 */
    }
    }
    <script>

## 参考链接 ##

[1. vue 基于el-table实现多页多选、翻页回显过程][1. vue _el-table]

## 3、按钮式可编辑表格 ##

vue 文件模板

<template>
    <el-table
          height="495"
          v-loading="loading"
          :data="tableData"
        >
    <el-table-column
            label="姓名"
            :show-overflow-tooltip="true"
            prop="name"
            width="200"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
            align="center"
          >
    <template slot-scope="scope">
    <div v-if="!scope.row.isEdit">{
        {
         scope.row.name}}</div>
    <div v-else>
    <el-input v-model="scope.row.name"></el-input>
    </div>
    </template>
    </el-table-column>
    <el-table-column
            label="地址"
            :show-overflow-tooltip="true"
            prop="address"
            width="200"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
            align="center"
          >
    <template slot-scope="scope">
    <div v-if="!scope.row.isEdit">{
        {
         scope.row.address}}</div>
    <div v-else>
    <el-input v-model="scope.row.address"></el-input>
    </div>
    </template>
    </el-table-column>
    
    <el-table-column
                  label="编辑按钮"
                  width="100"
                >
    <template slot-scope="scope">
    <el-button @click="handleClick(scope.row)">{
        {
         scope.row.isEdit ? '确认' : '编辑' }}</el-button>
    </template>
    </el-table-column>
    
    </el-table>
    </template>
    
    <script>
      export default {
        
        data() {
        
          return {
        
            tableData: [{
        
              date: '2016-05-02',
              name: '王小虎1',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
        
              date: '2016-05-04',
              name: '王小虎2',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
        
              date: '2016-05-01',
              name: '王小虎3',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
        
              date: '2016-05-03',
              name: '王小虎4',
              address: '上海市普陀区金沙江路 1516 弄'
            }]
          }
        },
        methods: {
        
          handleClick(row) {
        
            // 动态设置数据并通过这个数据判断显示方式
            if (row.isEdit) {
        
              // 2022.8.31 更新
              // 其实我们想要取消编辑状态的话不需要用下面这步
              // 直接使用 row.isEdit = false 就行
              // 因为 this.$set 后 isEdit 字段已经被 Vue 加上了响应式
              this.$delete(row, 'isEdit')
            } else {
        
              this.$set(row, 'isEdit', true);
            }
            console.log(this.tableData)
          },
          handle(row, column, cell, event) {
        }
        }
      }
    </script>

## 参考链接 ##

[1. Blog: 用element-ui表格实现可在表格内编辑，修改数据][1. Blog_ _element-ui]

--------------------

## 4、弹窗表格 el-table 滚动条设置 ##

## 参考链接 ##

[1. element-ui 中 table表格内容显示滚动条 （一）][1. element-ui _ table_]

[3cd3d055e537499f8f9ff3ca8ff1ca46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/048a95f38d7549d095eab810cd0220c7.png
[fae3a4e5810f4f85a82f6c16e69a3194.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/057341814c28471c90deb2ce6b39a0e9.png
[1. element-ui]: https://blog.csdn.net/qq_19331985/article/details/124852540
[2. Element-UI]: https://huaweicloud.csdn.net/638eec50dacf622b8df8dbd3.html?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-7-124864272-blog-124852540.235%5Ev27%5Epc_relevant_default_base1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-7-124864272-blog-124852540.235%5Ev27%5Epc_relevant_default_base1&utm_relevant_index=14
[1. vue _el-table]: https://huaweicloud.csdn.net/639fea7adacf622b8df8feff.html?spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-10-126854008-blog-125330735.235%5Ev27%5Epc_relevant_default_base1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-10-126854008-blog-125330735.235%5Ev27%5Epc_relevant_default_base1&utm_relevant_index=17
[1. Blog_ _element-ui]: https://blog.csdn.net/weixin_43160044/article/details/106797358?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-5-106797358-blog-124852540.235%5Ev27%5Epc_relevant_default_base1&spm=1001.2101.3001.4242.4&utm_relevant_index=8
[1. element-ui _ table_]: https://blog.csdn.net/wlf_wzx/article/details/105072033?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~Rate-1-105072033-blog-118903214.235%5Ev31%5Epc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2~default~CTRLIST~Rate-1-105072033-blog-118903214.235%5Ev31%5Epc_relevant_default_base3&utm_relevant_index=1