您好,欢迎来到花图问答。
搜索
您的当前位置:首页ElementUI Table中使用 input button等

ElementUI Table中使用 input button等

来源:花图问答

Table中使用<input />

推荐使用

  • 使用template标签 定义scope属性
  • 使用scope.row.xxx 访问当前行的内容
<el-table-column label="价格" min-width="150">
  <template scope="scope">
    <el-input size="small" v-show="scope.row.edit" v-model="editData.unitPrice" type="number" @change="editFunc(scope.row,$event)">
      <template slot="prepend">¥</template>
    </el-input>
    <span v-show="!scope.row.edit">
      <i class="price mark-i">¥ </i>{{scope.row.unitPrice}}
    </span>
  </template>
</el-table-column>
// input 使用需要添加一个指令inline-template
<el-table-column inline-template label="数量" width="200">
  // 绑定数据 v-model="row.xxx" row表示当前行的所有内容
  <el-input-number  v-model="row.id" :controls="false"></el-input-
</el-table-column>
效果

Copyright © 2019- huatuowenda.com 版权所有 湘ICP备2023022495号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务