怎么修改table中的某一行数据?

怎么修改table中的某一行数据

clipboard.png

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="phone" label="手机" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
            <template scope="scope">
                <el-button @click="" type="text" size="small">查看</el-button>
                <el-button @click="toEdit(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="dMove(scope.$index)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<el-dialog title="修改人员" :visible.sync="dialogFormEdit">
    <el-form :model="form1">
        <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form1.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input v-model="form1.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
            <div class="block">
                <el-date-picker v-model="form1.date" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1"></el-date-picker>
            </div>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form1.address" placeholder="请选择活动区域">
                <el-option label="浙江" value="浙江杭州"></el-option>
                <el-option label="上海" value="上海"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="edit(num)">确 定</el-button>
    </div>
</el-dialog>

clipboard.png

回答:

参考官网的例子啊!

回答:

1、使用v-for循环的时候,可以获取到一个index
2、定义一个空对象obj,弹出模态框之后,获取输入字段,填入obj,obj的字段格式需要与data中的列表项数据格式相同
3、通过index找到vue实例的data中列表对应的字段的第index项
4、使用slice方法,将index项删除,并填入obj

回答:

解决了吗

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注