table添加一行且可编辑 vue_vue-elementui 表格行内添加修改删除的实现

大列表

:inline="true"

:model="dataConfigCats"

size="mini"

label-width="80px"

>

size="mini"

v-model="dataConfigCats.sel"

placeholder="请选择"

>

v-for="item in dataConfigCats.data"

:key="item.value"

:label="item.catName"

:value="item.catId"

>

查询

size="mini"

:data="dataConfig.paginate.data"

style="width: 100%"

highlight-current-row

border

v-loading="dataConfig.loading"

>

v-for="(v, i) in dataConfig.columns"

:key="i"

:prop="v.field"

:label="v.title"

:width="v.width"

>

v-for="item in dataConfigCats.data"

:key="item.value"

:label="item.catName"

:value="item.catId"

>

size="mini"

placeholder="请输入内容"

v-model="dataConfig.sel[v.field]"

>

{ { dataConfigCat(scope.row[v.field]) }}

{ { scope.row[v.field] }}

class="el-tag el-tag--info el-tag--mini"

style="cursor: pointer;"

@click="changeDataConfig(scope.row, scope.$index, true)"

>

{ { scope.row.isSet ? "保存" : "修改" }}

v-if="!scope.row.isSet"

class="el-tag el-tag--danger el-tag--mini"

style="cursor: pointer;"

@click="deleteDataConfig(scope.row)"

>

删除

v-else

class="el-tag el-tag--mini"

style="cursor: pointer;"

@click="changeDataConfig(scope.row, scope.$index, false)"

>

取消

class="el-table-add-row"

style="width: 99.2%;"

@click="createDataConfig()"

>

+ 添加新数据

background

@size-change="getChangeLimit"

@current-change="getChangePage"

:current-page="dataConfig.paginate.current_page"

:page-sizes="[10, 20, 50, 100]"

:page-size="dataConfig.paginate.per_page"

layout="total, sizes, prev, pager, next, jumper"

:total="dataConfig.paginate.total"

:size="dataConfig.paginate.last_page"

>

import {

reqGetSysDataConfigs,

reqGetSysDataConfigCats,

reqSaveSysDat