表格可编辑

mapangzic
已于 2024-03-13 18:04:03 修改
阅读量351
点赞数 11
文章标签： vue.js elementui javascript
于 2024-03-13 18:03:10 首次发布
本文链接：https://blog.csdn.net/mapangzic/article/details/136687423
版权
表格内容新增，新增行或者删减行
<el-form ref="searchForm" v-model="searchForm" inline>
      <el-table
        border
        :data="searchForm.pageData"
        size="small"
        fit
        @selection-change="handleSelectionChange"
        show-overflow-tooltip
        height="400"
        cell-class-name="text-center"
        header-cell-class-name="text-center-header"
      >
      <el-table-column align="center"  width="55"><i  class="el-icon-circle-plus"></i></el-table-column>
        <el-table-column
          prop="materialName"
          label="物料名称"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.materialName`"
              :rules="rules.materialName"
            >
              <el-input v-model="scope.row.materialName" placeholder="请输入" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="materialNo"
          label="子目号"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.materialNo`"
              :rules="rules.materialNo"
            >
              <el-input v-model="scope.row.materialNo" placeholder="请输入" />
            </el-form-item> </template
        ></el-table-column>
        <el-table-column prop="unit" label="单位" align="center" width="90">
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.unit`"
              :rules="rules.unit"
            >
              <el-input v-model="scope.row.unit" placeholder="请输入" />
            </el-form-item> </template
        ></el-table-column>
        <el-table-column prop="purchaseMode" label="采购方式" align="center" width="90">
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.purchaseMode`"
              :rules="rules.purchaseMode"
            >
              <el-select
                style="width: 100%"
                v-model="scope.row.purchaseMode"
                placeholder="请选择采购方式"
                filterable
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          label="设备类型"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.unitPrice`"
              :rules="rules.unitPrice"
            >
              <el-input v-model="scope.row.unitPrice" placeholder="请输入姓名" />
            </el-form-item> </template
        ></el-table-column>
        <el-table-column
          prop="unitPrice"
          label="安装调试单价"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.unitPrice`"
              :rules="rules.unitPrice"
            >
              <el-input v-model="scope.row.unitPrice" placeholder="请输入姓名" />
            </el-form-item> </template
        ></el-table-column>
        <el-table-column
          prop="unitPrice"
          label="设备材料单价"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.unitPrice`"
              :rules="rules.unitPrice"
            >
              <el-input v-model="scope.row.unitPrice" placeholder="请输入姓名" />
            </el-form-item> </template
        ></el-table-column>
        <el-table-column
          prop="unitPrice"
          label="品牌"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.unitPrice`"
              :rules="rules.unitPrice"
            >
              <el-input v-model="scope.row.unitPrice" placeholder="请输入姓名" />
            </el-form-item> </template
        ></el-table-column>
        <el-table-column
          prop="unitPrice"
          label="型号"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.materialNo`"
              :rules="rules.materialNo"
            >
              <el-input v-model="scope.row.name" placeholder="请输入姓名" />
            </el-form-item> </template
        ></el-table-column>
        <el-table-column
          prop="params"
          label="物料描述"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="`searchForm.${scope.$index}.materialNo`"
              :rules="rules.materialNo"
            >
              <el-input v-model="scope.row.name" placeholder="请输入姓名" />
            </el-form-item> </template
        ></el-table-column>
      </el-table>
    </el-form>