tabel中设置输入框

最新推荐文章于 2023-12-06 10:09:39 发布

csstmg

最新推荐文章于 2023-12-06 10:09:39 发布

阅读量712

点赞数

分类专栏： element 前端

本文链接：https://blog.csdn.net/csstmg/article/details/111743990

版权

前端同时被 2 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<el-table stripe border highlight-current-row :data="workTargetVoList">
        <!-- <el-table-column type="index" label="" width="40" /> -->
        <el-table-column v-for="(item, idx) in tableColumn" align="center" :key="idx" :prop="item.prop" :label="item.label" :width="item.width" :min-width="item.minwidth">
          <template slot-scope="scope">
            <div v-if="item.prop === 'targetName'" class="table-operation">
              <el-input size="medium" :ref="'el-input-' + idx" v-model="scope.row[item.prop]" maxlength="100" />
              <!-- @keyup.enter.native="$event.target.blur" -->
              <!-- @blur="validateBlur" -->
            </div>
            <!-- /^\d{1,2}(.\d{1,2})?$/ -->
            <!-- onkeyup="value=value.replace(/[^\d{1,2}(.\d{1,2})?$]/g,'')" @focus="selectFocus(scope.$index)"-->
            <div v-else-if="item.prop === 'ratio'" class="table-operation">
              <el-input size="medium" :ref="'el-input-' + idx" v-model="scope.row[item.prop]" type="number" @blur="validateBlur(scope.$index, $event)" />
              <!-- type="number" -->
              <!-- @keyup.enter.native="$event.target.blur" -->
            </div>
            <span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :width="70">
          <template slot-scope="scope">
            <div class="table-operation">
              <a style="color:#4da1ff;cursor: pointer;font-size:12px" @click="operate(scope.$index)"><i class="el-icon-delete" style="margin-right:5px"></i>删除</a>
            </div>
          </template>
        </el-table-column>
      </el-table>

// 动态表格
      workTargetVoList: [
        {
          employeeId: null, // 员工ID
          ratio: '', // 权重(百分比)
          targetName: ''// 目标名称
        }
      ],
      tableColumn: [
        { prop: 'targetName', label: '目标名称', minwidth: '140' },
        { prop: 'ratio', label: '权重 (百分比)', minwidth: '140' },
        { prop: 'ratio', label: '商品编号', minwidth: '140' },
        { prop: 'name', label: '商品名称', minwidth: '140' },
        { prop: 'ratio', label: '规格', minwidth: '140' },
        { prop: 'ratio', label: '数量', minwidth: '140' },
        { prop: 'ratio', label: '标准单价', minwidth: '140' },
        { prop: 'ratio', label: '销售单价', minwidth: '140' },
        { prop: 'ratio', label: '金额', minwidth: '140' },
        { prop: 'ratio', label: '折扣金额', minwidth: '140' },
        { prop: 'ratio', label: '税率', minwidth: '140' },
        { prop: 'ratio', label: '税金', minwidth: '140' },
        { prop: 'ratio', label: '税后金额', minwidth: '140' },
        { prop: 'ratio', label: '备注', minwidth: '140' }
      ]