table添加一行且可编辑 vue_Vue使用AntDesign 表格可添加 可编辑行 可选择

Vue使用AntDesign 表格可添加 可编辑行 可选择

使用的是这个进行修改的，这个是绑定的数组，多以直接在里面多加一行空数据就可进行编辑

在中 只是多了一个添加的按钮

添加

:columns="columns"

:data-source="data"

bordered

>

v-if="record.editable"

style="margin: -5px 0"

:value="text"

@change="e => handleChange(e.target.value, record.key, col)"

/>

{ { text }}

save(record.key)">保存

title="确定取消?"

okText="确定"

cancelText="取消"

@confirm="() => cancel(record.key)"

>

取消

edit(record.key)">修改

在

//显示的表头

const columns = [

{

title: "name",

dataIndex: "name",

width: "25%",

scopedSlots: { customRender: "name" }

},

{

title: "age",

dataIndex: "age",

width: "15%",

scopedSlots: { customRender: "age" }

},

{

title: "address",

dataIndex: "address",

width: "40%",

scopedSlots: { customRender: "address" }

},

{

title: "operation",

dataIndex: "operation",

scopedSlots: { customRender: "operation" }

}

];

//列表绑定的数组

const data = [];

// 数组创建时候的下标

var numbe = 0;

export default {

data() {

//这是将数组里面的值单列出来 用的是E