美文网首页Element UI
ElementUI Table中使用 input button等

ElementUI Table中使用 input button等

作者: YLPeach | 来源:发表于2017-05-10 20:11 被阅读1755次

    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>
    
    效果

    相关文章

      网友评论

      • caihongzhiyue:可不可以在table组件做一个无限滚动的分页

      本文标题:ElementUI Table中使用 input button等

      本文链接:https://www.haomeiwen.com/subject/pqagtxtx.html