Element: Elementui 实现在table编辑

[HzqWebSite]

ElementUI version

OS/Browers version

Vue version

Reproduction Link

Steps to reproduce

What is Expected?

想用elementui实现在table中编辑，请问有没有大神指点该怎么做？

What is actually happening?

[erguotou520]

要的这种功能吧？其实很简单啊，table的data数组里的每个对象加一个isEditing标示下，然后用v-show控制是显示文字还是输入框

[Kingwl]

这玩意貌似不太适合扔到组件库里

[Leopoldthecoder]

不会放在组件里，请参照@erguotou520 的方法。

[justnowanna]

v-show 写在什么地方？table不是直接绑定的data,不用自己去做v-for么。v-show是写在哪里？

[erguotou520]

el-table-column的scoped slot里

[justnowanna]

@erguotou520 就是说不能用<el-table :data="tableData"></el-table>绑定数据了，要用v-for来循环el-table-item来展示数据了吗？

[justnowanna]

@erguotou520 现在官网的示例都是用el-table-column,这样要自己来做循环才可以吗？

[erguotou520]

非也，你看看scoped slots

[justnowanna]

哦。我知道你的意思了。我这里是这样做的动态表头，就像最后的操作这样做的。我大概知道了。谢谢你回复我。

[justnowanna]

@erguotou520

[liangxinhui]

非常感谢！

[fengyun2]

@erguotou520 如果是点击单元格可编辑，单元格失去焦点保存该如何做呢？监听<el-input />的blur事件会有bug,点击多几行数据就会导致单元格失焦出现问题。

    <el-table :data="tableData2" border style="width: 100%" @cell-click="cellClick">
      <el-table-column label="日期" width="180">
        <template scope="scope">
        <el-icon name="time"></el-icon>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180" >
        <template scope="scope">
          <el-input v-model="scope.row.name" v-if="scope.row.seen"
            @blur="loseFcous(scope.$index, scope.row)" >
          </el-input>
          <span style="margin-left: 10px" v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
    </el-table>

  data() {
    return {
      tableData2: [
        {
          seen: false,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          seen: false,
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          seen: false,
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          seen: false,
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  },

 methods: {
    loseFcous(index, row) {
      // debugger;
      row.seen = false;
    },
    cellClick(row, column) {
      // debugger;
      row.seen = true;
    }
}

[shonve]

哦。我知道你的意思了。我这里是这样做的动态表头，就像最后的操作这样做的。我大概知道了。谢谢你回复我。

你这个图中的写法是什么写法呀，怎么不像普通的html写法

[justnowanna]

@shonve Pug，原名Jade

[shonve]

@justnowanna 谢谢

[xuliangzhan]

可以参考这个 editable