表格根据名称是否相同进行合并

龙头炊箫人

已于 2023-03-20 17:17:44 修改

阅读量114

点赞数

文章标签： vue.js elementui javascript

于 2023-03-20 16:53:34 首次发布

本文链接：https://blog.csdn.net/qq_58745703/article/details/129670915

版权

文章提供了一个使用Vue.js、Element-UI库中element-table组件的代码示例，展示了如何创建一个可编辑的表格，包括新增、删除和编辑行的功能。通过v-if和v-else指令切换输入框与显示内容，以及自定义的span-method处理单元格合并。

摘要由CSDN通过智能技术生成

本章所用技术点：vue.js 、element-table 、 js

yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=

只是个dome写着玩的，代码不会太好看，用的也是element-table 当中 copy来的数据

说多了都没啥用，直接上代码

直接cpoy 即可用如果好用记得回来帮忙点个👍

<el-button @click="addRow" :disabled="isDisabled">新增</el-button>
      <el-table
      :span-method="spanMethod"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="{ row }">
          <el-input v-model="row.name" v-if="row.isShowInput"></el-input>
          <div v-else>{{ row.name }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="date" label="分数" width="180">
        <template slot-scope="{ row }">
          <el-input v-model="row.date" v-if="row.isShowInput"></el-input>
          <div v-else>{{ row.date }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="说明" >
        <template slot-scope="{ row }">
          <el-input v-model="row.address" v-if="row.isShowInput"></el-input>
          <div v-else>{{ row.address }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="{ row }">
          <div v-if="row.isShowInput">
            <el-button type="text" size="small" @click="confirm(row)"
              >确定</el-button
            >
            <el-button type="text" size="small" @click="cancel(row)"
              >取消</el-button
            >
          </div>
          <div v-else>
            <el-button
              :disabled="isDisabled"
              type="text"
              size="small"
              @click="editRow(row)"
              >编辑</el-button
            >
            <el-button
              :disabled="isDisabled"
              type="text"
              size="small"
              @click="delRow(row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

<script>
import {objectSpanMethod, getSpanArr} from '../common/setTableSpan'
export default {
  data() {
    return {
      isDisabled: false,
      copyEditRow: {},
      spanArr: [], // 用于存放需要合并的行的个数
      spanIndex: 0, // 记录spanArr数组的下标
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
          add: false,
          isShowInput: false,
          edit: false
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
          add: false,
          isShowInput: false,
          edit: false
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎3",
          add: false,
          address: "上海市普陀区金沙江路 1519 弄",
          isShowInput: false,
          edit: false,
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1516 弄",
          add: false,
          edit: false,
          isShowInput: false
        },
      ],
      
    };
  },
  methods: {
    editDisNo(){
      this.editDis = false
    },
    editRow(row) {
      this.isDisabled = true
      this.copyEditRow = JSON.parse(JSON.stringify(row))
      row.edit = true
      row.isShowInput = true
    },
    cancel(row) {
      let rowIndex = this.tableData.findIndex(v => v.id === row.id)
      if(row.edit) {
        this.tableData.splice(rowIndex, 1, this.copyEditRow)
      }
      if(row.add) {
        this.tableData.splice(rowIndex, 1)
      }
      this.isDisabled = false
      this.setTable()
    },
    confirm(row) {
      console.log(row, 'row')
      let rowIndex = this.tableData.findIndex(v => v.id === row.id)
      this.tableData.splice(rowIndex, 1)
      let Index = 0
      this.tableData.map((v, i)=> {
        if(v.name === row.name) {
          console.log(v.name)
          Index = i
        }
      })
      row.isShowInput = false
      if(Index > 0) {
        this.tableData.splice(Index + 1, 0, row);
      } else {
        this.tableData.unshift(row);
      }
      this.isDisabled = false
      this.setTable()
    },
    addRow() {
      this.isDisabled = true
      let params = {
        id: Math.floor(Math.random() * 999999),
        date: "",
        name: "",
        address: "",
        edit: false,
        add: true,
        isShowInput: true
      }
      this.tableData.unshift(params);
      this.setTable()
    },
    delRow(row) {
      
      handleConfirm({}).then(res => {
        this.tableData = this.tableData.filter(v => row.id !== v.id)
      this.setTable()
      }).catch(err=> {
        
      })
    },
    spanMethod({ rowIndex, columnIndex }) {
     return  objectSpanMethod({ rowIndex, columnIndex }, this.spanArr)
    },
    setTable() {
      this.tableData = this.tableRow().data
      this.spanArr = this.tableRow().spanArr
      this.spanIndex = this.tableRow().spanIndex
    },
    tableRow () {
     return getSpanArr(this.tableData, this.spanArr, this.spanIndex, 'name')
    },
  },
  created() {
      this.setTable()
}
};
</script>

setTableSpan.js

/**
 * 表格属性 :span-method="objectSpanMethod"
 * @param {Number} rowIndex 每一条行的下标
 * @param {Number} columnIndex 每一条列的下标
 * @param {Array} spanArr 用于存放需要合并的行的个数
*/

// *************************例子***************************
// spanMethod({ rowIndex, columnIndex }) {
//     return  objectSpanMethod({ rowIndex, columnIndex }, this.spanArr)
// }
function objectSpanMethod({ rowIndex, columnIndex }, spanArr) {
    if (columnIndex === 0) {
      const _row = spanArr[rowIndex]; // 行数
      const _col = _row > 0 ? 1 : 0; // 列数
      return {
        rowspan: _row,
        colspan: _col,
      };
    }
}

/**
 * 表格列的合并
 * @param {Array} data 要合并列的表格数据
 * @param {Array} spanArr 用于存放需要合并的行的个数
 * @param {Number} spanIndex 记录spanArr数组的下标
 * @param {String} flag 通过那个字段进行合并
*/
// *************************例子***************************
// setTable() {
//     this.tableData = this.tableRow().data
//     this.spanArr = this.tableRow().spanArr
//     this.spanIndex = this.tableRow().spanIndex
//   }
// tableRow () {
//     return getSpanArr(this.tableData, this.spanArr, this.spanIndex, 'name')
// }
// 直接引用setTable 即可
function getSpanArr(data, spanArr, spanIndex, flag) {
    spanArr = []
    for (let i = 0; i < data.length; i++) {
      if (i === 0) {
        spanArr.push(1);
        spanIndex = 0;
      } else {
        // 判断当前行与前一行内容是否相同
        if (data[i][`${flag}`] === data[i - 1][`${flag}`]) {
          spanArr[spanIndex] += 1; // 相同的话，当前下标所代表的值加一，例如：第一列的前三行可合并
          spanArr.push(0); // 记录完毕后，再往数组里添加一个元素0，作为下一次合并的初始值
        } else {
          spanArr.push(1); // 否则，依旧是一行
          spanIndex = i;
        }
      }
    }
    return {data, spanArr, spanIndex}
  }

export {objectSpanMethod, getSpanArr}