element表格点击添加编辑及新增

最新推荐文章于 2025-10-12 20:51:50 发布

原创最新推荐文章于 2025-10-12 20:51:50 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用Vue和Element-UI库创建一个可编辑表格，实现数据的新增、修改和删除功能。通过实例展示了如何操作数据、设置表单输入以及响应用户的操作行为。

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
}</style>
</head>

<body>
    <div id="app">
        <el-row>
            <el-col span="24">
                <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                                <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
                                </el-input>
                            </span>
                            <span v-else>{{scope.row[v.field]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                                {{scope.row.isSet?'保存':"修改"}}
                            </span>
                            <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
                                删除
                            </span>
                            <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col span="24">
                <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
            </el-col>
        </el-row>

    </div>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        //id生成工具 这个不用看 示例而已 模拟后台返回的id
        var generateId = {
            _count: 1,
            get(){return ((+new Date()) + "_" + (this._count++))}
        };
        //主要内容
        var app = new Vue({
            el: "#app",
            data: {
                master_user: {
                    sel: null,//选中行   
                    columns: [
                        { field: "type", title: "远程类型", width: 120 },
                        { field: "addport", title: "连接地址", width: 150 },
                        { field: "user", title: "登录用户", width: 120 },
                        { field: "pwd", title: "登录密码", width: 220 },
                        { field: "info", title: "其他信息" }
                    ],
                    data: [],
                },
            },
            methods: {
                //读取表格数据
                readMasterUser() {
                    //根据实际情况，自己改下啊 
                    app.master_user.data.map(i => {
                        i.id = generateId.get();//模拟后台插入成功后有了id
                        i.isSet=false;//给后台返回数据添加`isSet`标识
                        return i;
                    });
                },
                //添加账号
                addMasterUser() {
                    for (let i of app.master_user.data) {
                        if (i.isSet) return app.$message.warning("请先保存当前编辑项");
                    }
                    let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
                    app.master_user.data.push(j);
                    app.master_user.sel = JSON.parse(JSON.stringify(j));
                },
                //修改
                pwdChange(row, index, cg) {
                    //点击修改 判断是否已经保存所有操作
                    for (let i of app.master_user.data) {
                        if (i.isSet && i.id != row.id) {
                            app.$message.warning("请先保存当前编辑项");
                            return false;
                        }
                    }
                    //是否是取消操作
                    if (!cg) {
                        if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
                        return row.isSet = !row.isSet;
                    }
                    //提交数据
                    if (row.isSet) {
                        //项目是模拟请求操作  自己修改下
                        (function () {
                            let data = JSON.parse(JSON.stringify(app.master_user.sel));
                            for (let k in data) row[k] = data[k];
                            app.$message({
                                type: 'success',
                                message: "保存成功!"
                            });
                            //然后这边重新读取表格数据
                            app.readMasterUser();
                            row.isSet = false;
                        })();
                    } else {
                        app.master_user.sel = JSON.parse(JSON.stringify(row));
                        row.isSet = true;
                    }
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

<el-table
              :data="tableDatas"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
            <el-table-column prop="" label="期间" align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.periodId"
                  size="mini"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="sysName" label="业绩目标值" align="center">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.performanceTarget"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  style="width: 90%"
                  size="mini"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.performanceTarget
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="platformName" label="门诊业绩" align="center">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.mzyj"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{ scope.row.mzyj }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="platformName"
              label="业绩划扣比例"
              align="center"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.performanceDeductRatio"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.performanceDeductRatio
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="platformName"
              label="门诊划扣业绩"
              align="center"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.outpatientPerformance"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.outpatientPerformance
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="context" label="门诊利润" align="center">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.outpatientProfit"
                  v-show="scope.row.show"
                  type="number"
                  :min="0"
                  :controls="false"
                  :precision="2"
                  size="mini"
                  style="width: 90%"
                />
                <span v-show="!scope.row.show">{{
                  scope.row.outpatientProfit
                }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="" label="操作" min-width="180" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="handleDelete(scope.$index)"
                  class="btn-text-red"
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  >删除
                </el-button>

                <el-button
                  @click="scope.row.show = true"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  >编辑</el-button
                >

                <el-button
                  @click="save1(scope.row)"
                  type="success"
                  size="mini"
                  icon="el-icon-success"
                  >保存</el-button
                >
              </template>
            </el-table-column>
          </el-table>

js代码

handleAdd() {
      this.tableData.push({
        periodId: "",
        performanceTarget: "",
        mzyj: "",
        performanceDeductRatio: "",
        outpatientPerformance: "",
        outpatientProfit: "",
        show: true,
      });
    },
    handleDelete(index) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1)
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          })
        })
      },
      save1(row) {
      row.show = false;
    },

在这里插入图片描述

          <el-table
        :data="dataDetail.judgmentLetterDets"
        :row-class-name="tableRowClassName"
        border
        style="width: 100%"
        max-height="500px"
        @cell-click="tabClick">
        <el-table-column
          prop="reason"
          label="原因说明"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '原因说明'">
              <el-input v-model="scope.row.reason" maxlength="300" placeholder="请输入原因" size="mini" @blur="inputBlur"/>
            </span>
            <span v-else>{{ scope.row.reason }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="judgmentAmount"
          label="判责金额(元)"
          width="120px"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '判责金额(元)'">
              <el-input
                v-model="scope.row.judgmentAmount"
                :blur="inputBlur"
                placeholder="请输入判责金额"
                size="mini"
                @blur="inputBlur"/>
            </span>
            <!-- <span v-else>{{ scope.row.judgmentAmount | fmoney }}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '备注'">
              <el-input v-model="scope.row.remark" maxlength="300" placeholder="请输入备注" size="mini" @blur="inputBlur"/>
            </span>
            <span v-else>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>

data:{
		dataDetail:{judgmentLetterDets:[{}]},//这里是表格数据，这里给的一个对象表示有一条空数据
        tabClickIndex: null, // 点击的单元格
        tabClickLabel: '', // 当前点击的列名

// 添加明细原因 row 当前行 column 当前列
        tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
   		},
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '原因说明':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '判责金额(元)':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '备注':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('添加明细原因', this.tabClickIndex, row, column, cell, event)
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },