element--el-table中写input标签

104 篇文章 0 订阅

在这里插入图片描述

<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>)
          }
        }
      ],
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table中嵌入el-input的方法如下: 1. 首先,确保你已经安装了element-ui@2.12.0以及el-table-infinite-scroll插件。 2. 在el-table的列定义中,使用scoped slot来自定义每个单元格的内容。例如,你可以在<template>标签中添加一个slot来嵌入el-input组件。 示例代码如下: ``` <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <el-input v-model="scope.row.name" placeholder="请输入姓名"></el-input> </template> </el-table-column> </el-table> ``` 在这个示例代码中,我们在el-table的列定义中添加了一个scoped slot,通过v-model绑定了输入框的值到tableData中的name字段。 这样,当表格打开时,输入框会回显数据并且可以进行修改。你可以根据需要进一步自定义el-input的属性和事件来实现更多功能。 另外,如果你想要在当前行聚焦时进行文本的编辑或下拉框的选择,你可以使用highlight-current-row这个样式,并设置el-table的highlight-current-row属性为true。 这样,当你点击某一行时,该行会被高亮显示,你可以在这个状态下进行编辑或选择操作。 希望这些信息对你有帮助!如果你还有其他问题,请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-table-infinite-scroll:El-Table无限滚动](https://download.csdn.net/download/weixin_42131861/19079535)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [el-table中嵌入el-input无法输入](https://blog.csdn.net/weixin_46410488/article/details/130961364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [el-table嵌入输入框](https://blog.csdn.net/weixin_59213769/article/details/128672090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值