vue el-table 添加行手动填写数据

最新推荐文章于 2025-04-28 14:06:58 发布

山橘满月

最新推荐文章于 2025-04-28 14:06:58 发布

阅读量4.3k

点赞数 3

分类专栏： vue 文章标签： vue elementui

原文链接：https://blog.youkuaiyun.com/Bing_lemon/article/details/118437866

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在Element UI框架下实现动态添加表格行的方法。通过点击按钮触发添加空行的功能，用户可以在新行中输入数据。代码示例展示了如何使用Vue.js进行数据绑定和事件处理。

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

如图点击添加行就会出现table表中空白的一行让使用者自行填写

页面：

 <el-button type="primary" class="add-btn" @click="addDemo"
      >添加行</el-button
    >
    <el-table
      :data="tableData"
      size="mini"
      stripe
      highlight-current-row
      border
      style="width: 97.3%"
      class="el-tb-edit"
      :header-cell-style="{
        background: '#2a87ed',
        color: '#fff',
        fontSize: ' 1.2rem',
        fontWeight: 'normal',
        height: '2.88rem',
      }"
      ref="demoTable"
    >
      <!-- <el-table-column type="index" width="50">序号</el-table-column> -->
      <el-table-column prop="riskSourceName" label="主要危险源" width="130">
        <template slot-scope="scope">
          <div>
            <el-input
              v-model="scope.row.riskSourceName"
              placeholder="请选择"
              suffix-icon="el-icon-s-custom"
              readonly
            ></el-input>
              <span>{{ scope.row.riskSourceName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="riskPointName" label="风险点" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.riskPointName" readonly></el-input>
            <span>{{ scope.row.riskPointName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="riskLevel" label="风险等级" width="160">
        <template slot-scope="scope">
          <el-select v-model="scope.row.riskLevel" placeholder="请选择" >
            <el-option
              v-for="item in risk"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <span>{{ scope.row.riskLevelName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="hiddenDanger" label="存在隐患" width="230">
        <template slot-scope="scope">
          <el-input
            size="mini"
            v-model="scope.row.hiddenDanger"
            placeholder="请输入"
          ></el-input>
            <span>{{ scope.row.hiddenDanger }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="分类" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="请选择">
            <el-option
              v-for="item in claoption"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <span>{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="accident" label="可能导致事故" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.accident" placeholder="请选择">
            <el-option
              v-for="item in acciList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <span>{{ scope.row.accidentName }}</span>
        </template>
      </el-table-column>
    </el-table>

js:

data() {
    return {
      dataId:0,
      tableData: [],
    };
  },
  methods: {
    //   添加行
    addDemo() {
      var d = {
        index: this.dataId++,
        riskSourceName: "",
        riskLevel: "",
        riskPointName: "",
        type: "",
        hiddenDanger: "",
        dangerLevel: "",
        accident: "",
      };
      this.tableData.push(d);
      setTimeout(() => {
        this.$refs.demoTable.setCurrentRow(d);
      }, 10);
    },

   }