【vue】Dialog嵌套表格并且可编辑或可多选

梦里梦外; 2023-09-25 21:21 46阅读 0赞

## 一、Dialog嵌套表格，可多选，将多选的数据传输给后端 ##

#### 需求：点击按钮，弹出弹窗展示数据，用户勾选一些数据后，点击确定按钮，将数据传输给后端 ####

<el-button type="primary" @click="jk()">选择结课名单</el-button>

return {
        
        tableData: [],
        multipleSelectionJkAndDf: [],
        dialog3: {
        
            Status: "A",
            FormVisibleJkAndDf: false
        },
        dialog4: {
        
            Status: "U",
            FormVisibleDf: false
        },
        textJkAndDf: {
        
            A: "结课名单",
            U: "学员打分"
        }
    }

#### 点击按钮后调用的方法：打开dialog弹窗，展示数据 ####

jk() {
        
          this.dialog3.FormVisibleJkAndDf = true;
          this.dialog3.Status = "A";
          //查询数据
          let pxbid = this.$route.query.pxbid;
          let page = 1;
          let rows = 30;
          let jk = "1";
          staffJkandDfList({
         pxbid: pxbid, page: page, rows: rows, jk: jk }).then((res) => {
        
            this.tableData = res.data.map.data.list;
          });
        },

#### 弹窗中展示的内容： ####

<el-dialog :title="textJkAndDf[dialog3.Status]" :visible.sync="dialog3.FormVisibleJkAndDf">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChangeJkAndDf"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column> 
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="ryxm" label="姓名" width="100" align="center"></el-table-column>
            <el-table-column prop="rysfz" label="身份证号码" width="180" align="center"></el-table-column>
            <el-table-column prop="rysh" label="手机号码" align="center"></el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" align="center">
            <el-button @click="dialog3.FormVisibleJkAndDf = false">返 回</el-button>
            <el-button type="primary" @click="updateJk()">确 定</el-button>
          </div>
        </el-dialog>

#### methods中的接口： ####

handleSelectionChangeJkAndDf(val) {
        
          this.multipleSelectionJkAndDf = val; //handleSelectionChangeJkAndDf这个事件的作用是保存勾选的数据，将数据放进multipleSelectionJkAndDf数组中
        },
    updateJk() {
        
          console.log("选中的参数：" + JSON.stringify(this.multipleSelectionJkAndDf));//将对象转换为json字符串后，传给后端
          if (this.handleSelectionChangeJkAndDf.length <= 0) {
        
            this.$alert("未选择结课人员！");
            return;
          }
          updateStaffList({
         flag: "jk", updateRyList: JSON.stringify(this.multipleSelectionJkAndDf) }).then((res) => {
        
            if (res.data.appcode == "0") {
        
              this.$message({
        
                message: res.data.map.data.returnMsg,
                type: "success",
                customClass: "zZindex"
              });
              this.getListJkAndDf();
            } else {
        
              this.$message({
        
                message: res.data.map.data.returnMsg,
                type: "warning",
                customClass: "zZindex"
              });
              this.getListJkAndDf();
            }
            this.dialog3.FormVisibleJkAndDf = false;//操作结束后关闭弹窗
          });
    }

#### 后端接收到参数后，需要将其转换为jsonArray数组 ####

@PostMapping("updateStaffList")
    public ResultVO updateStaffList(@RequestBody Map map) {
        
        String flag = (String) map.get("flag");
        String list = (String) map.get("updateRyList");
        JSONArray picArray = JSONArray.parseArray(list);//将json格式的字符串转化为JsonArray数组
        //随后进行业务操作
    }

## 二、Dialog嵌套表格，可编辑，编辑完毕后将所有数据传输给后端 ##

#### 需求：点击按钮，弹出弹窗展示数据，用户将数据填充上去后，点击确定按钮，将数据传输给后端 ####

<el-button type="primary" @click="df()">打分</el-button>

#### 点击按钮后调用的方法：打开dialog弹窗，展示数据，分数那列可编辑 ####

df() {
        
       this.dialog4.FormVisibleDf = true;
       this.dialog4.Status = "U";
        //查询人员信息数据
       let pxbid = this.$route.query.pxbid;
       let page = 1;
       let rows = 30;
       let df = "1";
       staffJkandDfList({
         pxbid: pxbid, page: page, rows: rows, df: df }).then((res) => {
        
         this.tableData = res.data.map.data.list;
       });
    }

<el-dialog :title="textJkAndDf[dialog4.Status]" :visible.sync="dialog4.FormVisibleDf">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChangeDf"
          >
            
            <el-table-column label="序号" type="index" width="60" align="center" />
            <el-table-column prop="ryxm" label="姓名" width="100" align="center"></el-table-column>
            <el-table-column prop="rysfz" label="身份证号码" width="180" align="center"></el-table-column>
            <el-table-column prop="rysh" label="手机号码" width="160" align="center"></el-table-column>
            <el-table-column prop="df" label="分数" align="center">
              <div class="itm" slot-scope="scope">
                <el-input class="itm__input" v-model="scope.row.df" placeholder="请输入分数，不可超过100分"></el-input>
              </div>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer" align="center">
            <el-button @click="dialog4.FormVisibleDf = false">返 回</el-button>
            <el-button type="primary" @click="updateDf()">确 定</el-button>
          </div>
    </el-dialog>

#### methods中的接口： ####

updateDf() {
        
          console.log("打分数据：" + JSON.stringify(this.tableData));
          updateStaffList({
         flag: "df", updateRyList: JSON.stringify(this.tableData) }).then((res) => {
        
            if (res.data.appcode == "0") {
        
              this.$message({
        
                message: res.data.map.data.returnMsg,
                type: "success",
                customClass: "zZindex"
              });
              this.getListJkAndDf();
            } else {
        
              this.$message({
        
                message: res.data.msg,
                type: "warning",
                customClass: "zZindex"
              });
              this.getListJkAndDf();
            }
            this.dialog4.FormVisibleDf = false;
          });
     }

#### 后端接收到参数后，需要将其转换为jsonArray数组 ####