vue+elementUi 动态添加删除table表格

<div class="addPlus" style="margin-top:15px;">
                    <el-button type='primary' @click="addLevel" size='mini'>添加关卡</el-button>
                </div>
                <el-table :data="customList" size='mini' style="width: 100%;margin-top:15px">
                    <el-table-column label="关卡名称">
                        <template slot-scope='scope'>
                            关卡{
  {scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="questionName" label="试题名称">
                        <template slot-scope="scope">
                            <el-input disabled v-model="scope.row.questionName" size='mini'></el-input>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现可编辑动态表格的方法如下: 1. 在 Vue 中引入 Element UI 的 Table 组件,并设置 table 的 columns 和 data 属性。 2. 在 columns 中设置需要编辑的列的 type 属性为 "input"。 3. 在 data 中设置每个单元格的 editable 属性为 true,表示该单元格可以编辑。 4. 绑定 table 的 cell-click 事件,当用户点击单元格时,判断该单元格是否可以编辑,如果可以编辑,则将该单元格的 editable 属性设置为 false,同时保存该单元格的值。 5. 在单元格失去焦点时,将该单元格的 editable 属性设置为 true,同时将修改后的值保存到 data 中。 以下是示例代码: ```html <template> <el-table :data="tableData" @cell-click="handleCellClick"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true" :type="'input'"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' } ] } }, methods: { handleCellClick(row, column, cell, event) { if (column.editable) { cell.children[0].setAttribute('contenteditable', true) cell.children[0].focus() cell.children[0].addEventListener('blur', () => { cell.children[0].removeAttribute('contenteditable') row[column.prop] = cell.innerText }) } } } } </script> ``` 在上面的代码中,我们使用了 contenteditable 属性来实现单元格的可编辑。在 cell-click 事件中,当单元格可编辑时,我们将该单元格的 contenteditable 属性设置为 true,并且将焦点设置到该单元格中。当单元格失去焦点时,我们将 contenteditable 属性设置为 false,并且将修改后的值保存到 data 中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值