vue项目el-table组件中实现行内编辑和新增

pc管理后台，el-table是常用的组件，通常是用来显示列表。当需要新增和修改的时候，大部分场景都是弹出一个dialog，在模态框中操作。

但有时候，仅仅是很简单的一个修改，比如就几个字，那么再用一个el-dialog组件，有点太重量级了，所以我自己实现了，直接在table内修改，无需模态框，先看效果。

新增效果如下：

新增的思路是，当点击新增按钮后，在数据源中的首部添加一行空数据，这样就会显示一条新的编辑行，核心代码如下：

const handleAdd = () => {
    const newObj = {
        name: '',
        cname: '',
        sort: 0,
        enable: true
    }
    state.dataList.unshift(newObj)
}

修改的效果如下：

修改的思路略有不同，首先在data初始化的时候，给每一行添加一个isEdit属性，如下：

const initList = () => {
    state.loading = true
    AJGetCatalog().then(res => {
    // 每一行添加isEdit属性
        res.data.forEach((row) => {
        row.isEdit = false
        })
        state.dataList = res.data
        state.loading = false
    })
    }

在el-table-column中，通过v-if判断isEdit属性来决定编辑状态，如果false则显示文本，如果true则显示input框，代码如下：

<el-table-column prop="name" label="目录名">
    <template #default="{row}">
        <span v-if="row.isEdit===false">{{row.name}}</span>
        <el-input placeholder="请输入目录名" v-else size="small" v-model="row.name">        </el-input>
    </template>
</el-table-column>
<el-table-column prop="cname" label="别名">
    <template #default="{row}">
        <span v-if="row.isEdit===false">{{row.cname}}</span>
        <el-input placeholder="只能是字母4-20字符" v-else size="small" v-model="row.cname">        </el-input>
    </template>
</el-table-column>
<el-table-column prop="cname" label="排序">
    <template #default="{row}">
        <span v-if="row.isEdit===false">{{row.sort}}</span>
        <el-input placeholder="按照升序排序" v-else type="number" size="small" v-model="row.sort">        </el-input>
    </template>
</el-table-column>

通常的，编辑按钮和保存按钮，也是根据isEdit属性来切换，当编辑修改按钮时，使此行的isEdit赋值true，则会进入编辑状态，代码如下：

<el-tooltip v-if="row.isEdit===false" :show-after="200" content="修改" placement="top">
    <el-button size="mini" @click="row.isEdit=true" type="primary">
        <i class="iconfont icon-xiugai el-icon--center"></i>
    </el-button>
</el-tooltip>
<el-tooltip v-else :show-after="200" content="保存" placement="top">
    <el-button size="mini" @click="handleSave(row)" type="success">
        <i class="iconfont icon-baocun el-icon--center"></i>
    </el-button>
</el-tooltip>

最后就是handleSave方法了，新增和修改使用此方法，根据row是否有ID属性，来实现是新增还是修改逻辑，代码如下：

const handleSave = (row) => {
    const {
        name,
        cname,
        sort
    } = row
				
    if (row._id) {// 编辑
        AJEditCatalog(row._id, {
            name,
            cname,
            sort
        }).then(...)
    } else { // 新增
        AJAddCatalog({
            name,
            cname,
            sort
        }).then(...)
    }
}

好了，至此功能全部实现，比使用dialod轻量级很多哦。