vue table 加checkbox 选中后填写input

茶杯的杯

于 2024-04-29 16:59:17 发布

阅读量402

点赞数 11

分类专栏： vue aggrid layui 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_42955679/article/details/138318186

版权

vue aggrid layui 专栏收录该内容

6 篇文章

订阅专栏

文章讲述了如何在Vue表格中使用checkbox，当选中后对应行的input变为可编辑。作者详细描述了代码实现和表单提交时处理选中状态的方法，以及如何在关闭页面时重置复选框状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 在table中加入checkbox控件，选中后该行的input 值才能填写

效果图如下
在这里插入图片描述
1.根据百度和自己尝试实现该效果
table 的写法，table 的值用 tableData 绑定，后面用了多个v-if 判断input 是否显示。

  <el-table
      id="ssmcTable"
      :show-header="false"
      border
      stripe
      :data="tableData"
      ref="multipleTable"
      @selection-change="selectionLineChangeHandle"
      :row-style="changeDisableHandle"
    >
      <el-table-column type="selection" prop="xuhao" width="55">
      </el-table-column>

      <el-table-column
        prop="ssmc"
        label="地下公共基础设施用途"
        width="243"
      >
      </el-table-column>

      <el-table-column prop="jzmj" label="面积(M²)/长度(m)" width="250" style="vertical-align: middle;">
        <template slot-scope="scope">
          <div v-if="scope.row.Isdisabledmj" >
            面积
            <el-input
              style="width: 180px;"
              type="number"
              v-model="scope.row.mj"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入"
              hidden="true"
              :disabled="scope.row.Isdisabled"
            ></el-input>

          </div>
          <div v-if="scope.row.Isdisabledcd">
            长度
            <el-input
              style="width: 180px;"
              type="number"
              v-model="scope.row.cd"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入"
              hidden="true"
              :disabled="scope.row.Isdisabled"
            ></el-input>

          </div>

          <!-- @keydown.enter.native="Enter(scope.row,scope.$index)"  :disabled="Disabled[scope.$index]"-->

        </template>
      </el-table-column>

      <el-table-column prop="qt" label="其它" width="250">
        <template slot-scope="scope" >
          <div v-if="scope.row.Isdisabledzb">
            {{ scope.row.zhubian }}
            <el-input
              style="width: 150px;"
              type="number"
              v-model="scope.row.qt"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入"
              hidden="true"
              :disabled="scope.row.Isdisabled"
            ></el-input>

          </div>

          <el-input
            id="qtyt"
            v-if="scope.row.showOther"
            style="width: 230px"
            type="text"
            v-model="scope.row.qtyt"
            :max="scope.row.qtyt"
            placeholder="请输入其它用途"
            hidden="true"
            :disabled="scope.row.Isdisabled"
          ></el-input>

        </template>
      </el-table-column>

      <el-table-column prop="lufu" label="其它" width="200">
        <template slot-scope="scope" >
          <div v-if="scope.row.Isdisabledlf">
            路幅
            <el-input
              style="width: 100px"
              type="number"
              v-model="scope.row.lufu"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入"
              hidden="true"
              :disabled="scope.row.Isdisabled"
            ></el-input>

          </div>

        </template>
      </el-table-column>
      <el-table-column prop="chedao" label="其它" width="200">
        <template slot-scope="scope" >
          <div v-if="scope.row.Isdisabledche">
            车道数
            <el-input
              style="width: 100px"
              type="number"
              v-model="scope.row.chedao"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              placeholder="请输入"
              hidden="true"
              :disabled="scope.row.Isdisabled"
            ></el-input>

          </div>


        </template>
      </el-table-column>


    </el-table>

tableData的值,这里只展示前两个

  data() {
    return {
    multipleSelection: [],
  tableData: [
        {
          ssmc: "变电站",
          mj: null,
          cd: null,
          qt:null,lufu:null,chedao:null,
          Isdisabledmj:true,
          Isdisabledcd:false,
          zhubian:"主变容量",
          Isdisabledzb:true,
          Isdisabledlf:false,
          Isdisabledche:false,
          Isdisabled:false , //判断能不能填写
          id:1,
          showOther:false,
          qtyt:null
        },
        {
          ssmc: "水库",
          mj: null,
          cd: null,
          qt:null,lufu:null,chedao:null,
          Isdisabledmj:true,
          Isdisabledcd:false,
          zhubian:"容量",
          Isdisabledzb:true,
          Isdisabledlf:false,
          Isdisabledche:false,
          Isdisabled:false,
          id:2,
          showOther:false,
          qtyt:null
        },
        {
          ssmc: "泵站",
          mj: null,
          cd: null,
          qt:null,lufu:null,chedao:null,
          Isdisabledmj:true,
          Isdisabledcd:false,
          zhubian:"设计能力",
          Isdisabledzb:true,
          Isdisabledlf:false,
          Isdisabledche:false,
          Isdisabled:false,id:3,
          showOther:false,
          qtyt:null
        },
        ]
        }

3.在form表单提交时获取值this.multipleSelection

 async submitUpload() {
      // console.log("111111");
      this.$refs.AddgonggongForm.validate((valid) => {
        if (valid) {
          if (this.validateForm()) {
            this.$confirm("是否进行提交?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "info",
            })
              .then(() => {
                this.formData = new FormData();
                Object.keys(this.form).forEach((key) => {
                  this.formData.append(key, this.form[key]);
                });
                let arr = [];
                if (this.multipleSelection.length > 0) {
                  this.formData.append(
                    "scTable",
                    JSON.stringify(this.multipleSelection)
                  );
                  console.log("this.multipleSelection",this.multipleSelection)

                } else {
                  this.formData.append("scTable", "");
                }
                insertGonggong(this.formData)
                  .then((response) => {
                    this.$emit("successForm", response);
                  })
                  .catch((_) => {
                  });
              })
              .catch((_) => {
              });
          }
        } else {
          this.$notify({
            title: "提交失败",
            message: "请检查页面是否未填写完整",
            type: "error",
            duration: 2000,
          });
        }
      });
    },

4.写完后，测试发现每次添加完，或者关闭页面的时候，checkbox 的选中值不会刷新，需要刷新form时加个方法

resetForm() {
      this.$refs.AddgonggongForm.resetFields();
      //关闭页面是刷新复选框，不被选中
      this.tableData.forEach((item)=>{
        this.$refs.multipleTable.toggleRowSelection(item,false);
      })
    },