代码之家 › 专栏 › 技术社区 › dede.brahma

Vuejs-元素UI:如何启用编辑一行el表列

element-ui contenteditable vuejs2

dede.brahma · 技术社区 · 6 年前

我希望在行表中可以使用启用和禁用参数进行编辑,如果单击中的编辑按钮操作,则启用一个行表,但如果单击中的保存按钮操作,则禁用。对于默认表值,禁用。

这是我的代码:

<el-table :data="tableData" :key="index" style="width: 100%" stripe>
        <el-table-column label="Name">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" :disabled="isEdit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="Address">
          <template slot-scope="scope">
            <el-input v-model="scope.row.address" :disabled="isEdit"></el-input>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="default" @click="handleSaveRow">Save</el-button>
            <el-button type="primary" @click="handleEditRow">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>

但当我单击“编辑”按钮时,所有列的行都将启用。

预期 :编辑单击可以更改表的一行以启用

小提琴: https://jsfiddle.net/dede402/otxahoev/

2 回复 | 直到 6 年前

budgw 6 年前

这是正常的,因为您对所有行使用相同的布尔值。您必须找到一种方法,让每行有一个指示编辑模式的布尔值。

以下是一个有效的解决方案: https://jsfiddle.net/budgw/d3fxw5wq/1/

如果要将数据与UI逻辑分开(通常是个好主意),则应使用 computed 属性,以便使用 edited 字段。

N. Der 5 年前

@Budgw的回答是正确的-我想在他的回答中加上一句。与其禁用输入,不如将其设置为只读属性。我觉得那样更好,也能让你的桌子看起来更干净。

<el-input v-model="scope.row.name" :readonly="!scope.row.edited"></el-input>

参观 https://jsfiddle.net/noted/0atjsrnw/4/ 完整代码。

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前