element表格加输入框

最新推荐文章于 2024-07-20 19:15:34 发布

向来枉费推移力

最新推荐文章于 2024-07-20 19:15:34 发布

阅读量4.7k

点赞数 1

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/qq_41704197/article/details/110039650

版权

这篇博客展示了如何使用Vue.js的el-table组件来实现数据的展示、编辑和删除功能。通过el-table-column定义列，利用template slot进行自定义列头和内容，实现了固话号码的编辑（v-model绑定并触发@change事件）以及删除按钮（点击调用removeDomain方法，从数据列表中移除项）。内容主要涉及前端开发中的Vue组件和数据操作。

摘要由CSDN通过智能技术生成

<el-table
                                :data="PersonList"
                                style="width: 100%">
                            <el-table-column
                                    label="员工姓名"
                                    prop="name">
                            </el-table-column>
                            <el-table-column
                                    label="手机号码"
                                    prop="tel">
                            </el-table-column>
                            <el-table-column >
                                <template slot="header" slot-scope="scope">
                                    <span>固话</span>
                                </template>
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.fixedTel" @change="setFixedTel(scope.row)"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot="header" slot-scope="scope">
                                    <span></span>
                                </template>
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click.prevent="removeDomain(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

//方法
removeDomain (item) {
                const index = this.PersonList.indexOf(item)
                if (index !== -1) {
                    this.PersonList.splice(index, 1)
                }
            },