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

一、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> <!--type必须是selection类型-->
        <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>

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

点击按钮后调用的方法：打开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 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="手机号码" 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数组

@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数组
    //随后进行业务操作
}