element--el-table中写input标签

在这里插入图片描述

<el-table
          v-if="form.addOrEditTransactionSalaryVo.isKpi===1"
          stripe
          border
          highlight-current-row
          :data="form.addOrEditTransactionSalaryVo.workTargetVoList"
          :max-height="300"
        >
          <el-table-column type="index" label="" width="40" />
          <el-table-column
            v-for="(item, idx) in tableColumn"
            :key="idx"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <div v-if="item.prop === 'targetName'" class=" table-operation">
                <el-input
                  :ref="'el-input-' + idx"
                  v-model="scope.row[item.prop]"
                  :disabled="noEdit"
                  maxlength="100"
                  show-word-limit
                />
                <!-- @keyup.enter.native="$event.target.blur" -->
                <!-- @blur="validateBlur" -->
              </div>
              <!-- οnkeyup="value=value.replace(/[^\d{1,2}(.\d{1,2})?$]/g,'')" -->
              <!-- @input="form.data=form.data.replace(/[^\d{1,2}(.\d{1,2})?$]/g,'')" -->
              <div v-else-if="item.prop === 'ratio'" class="table-operation">
                <el-input
                  :ref="'el-input-' + idx"
                  v-model="scope.row[item.prop]"
                  :disabled="noEdit"
                  type="number"
                  @focus="selectFocus(scope.$index)"
                  @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="50">
            <template slot-scope="scope">
              <div v-show="!noEdit" class="table-operation">
                <a class="color-ff9" @click="operate(scope.$index)">删除</a>
              </div>
            </template>
          </el-table-column>
        </el-table>

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试

  • 第二种方案 render
<template slot-scope="scope">
       <template>
            <expand-dom :column="item" :row="scope.row" :render="item.value" :index="scope.$index" />
      </template>
 </template>
export default {
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index
        }
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render(h, params)
      }
    }
  },
  • 父组件传值
<targetTable
        :table-height="tableHeight-88"
        :table-data="planList"
        :table-columns="qualtableLabel"
        :page="searchParams.pageNum"
        :rows="searchParams.pageSize"
        :total="searchParams.total"
        @handleChange="handleChange"
      />


qualtableLabel: [ // 表头信息
        { label: '工资月份', param: 'month' },
        { label: '申请范围', param: 'userCode' },
        { label: '发起时间', param: 'userName' },
        { label: '发起人', param: 'departmentName', width: 240 },
        { label: '上一级处理人', param: 'gradeName' },
        { label: '流程状态', param: 'entryDate', width: 200 },
        { label: '待办人', param: 'leaveDate', width: 200 },
        {
          label: '操作', width: 240,
          render: (h, scope) => {
            return (<span>
              {
                <el-button type='primary' size='mini' plain icon='el-icon-emit' onClick={() => { this.goSet(scope.row, '') }}>查看</el-button>
              }
            </span>)
          }
        }
      ],
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值