vue element-ui 表格点击编辑，变成input框输入


效果图
before：
在这里插入图片描述
after：
在这里插入图片描述

实现：
HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<el-row :gutter="20" class="kong">
    <el-table :data="prototypes" style="width: 100%;">
        // 序号栏目 type="index"
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        // 此页重点部分  编辑之前以span形式显示，点击编辑之后，以input栏目显示
        <el-table-column label="字段名称" width="380">
            <template slot-scope="scope">
                <span v-if="scope.row.vVisible">{{scope.row.name}}</span>
                <el-input v-else v-model="scope.row.name"></el-input>
            </template>
        </el-table-column>
       
        <el-table-column label="操作" width="160">
            <template slot-scope="scope">
                <div class="special">
                    <span v-if="scope.row.vVisible" class="items" @click="edit(scope.row)">编辑</span>
                    <span v-else class="items" @click="edit(scope.row)">保存</span>
                    <span>|</span>
                    <span class="items" @click="deleteit(scope.row)">删除</span>
                </div>
            </template>
        </el-table-column>
    </el-table>
</el-row>

JS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
export default {
    data() {
        return{
            // 表格绑定的数据
            prototypes:[{
                name: 'type',
                describe: '设备类型字段，不可修改',
                isNull: false,
                vVisible: true
            },
            {
                name: 'id',
                describe: '设备唯一标识符，同类型设备不允许',
                isNull: true,
                vVisible: true
            },
            {
                name: 'name',
                describe: '设备名称',
                isNull: true,
                vVisible: true
            }],
        }
    },
    methods: {
        // 点击编辑按钮
        edit(row) {
            row.vVisible = !row.vVisible
        },
        // 点击删除按钮
        deleteit(row) {

        }
    },

CSS部分

1
2
3
4
5
6
7
8
.special{
    cursor: pointer;
    .items{
        &:hover {
            color: #6fbaff;
        }
    }
}