table.vue

<a-table :columns="columns" :data-source="dataSource" :customRow="customClick" :scroll="{ x: 1000, y: 347 }" :pagination="false" :size="small" bordered><template v-for="col in slotArray" :slot="col" slot-scope="text, record,index"><div :key="col"><editable-cell v-if="isRouterAlive" @change="onCellChange(index, col, $event)" :text="text" :col="col" :index="index" :record="record" :dataSource="dataSource" /></div></template>
</a-table>
<!-- slotArray:需要编辑的字段isRouterAlive：解决数据变化表格视图不更新-->

import EditableCell from "@/components/EditableCell";
export default {components: {EditableCell,},data() {return {columns:[{dataIndex:'fieldA',key:'fieldA',scopedSlots: { customRender: 'fieldA '},//（重要）,输入框插槽width: 100,align: 'center',ellipsis: true,//溢出隐藏},{dataIndex:'fieldB',key:'fieldB',scopedSlots: { customRender: 'fieldB'},//（重要）,输入框插槽width: 100,align: 'center',ellipsis: true,//溢出隐藏}],dataSource:[],       //表格数据slotArray: ['fieldA','fieldB'],          //明细中 需要编辑的字段isRouterAlive: true,    //更新视图visible: false,         //控制右键菜单显示customClick: (record, index) => ({on: {contextmenu: (e) => {//右键事件e.preventDefault();//something code},click: () => {//点击事件//something code}},}),}},watch:{visible(value) { //关闭右键if (value) {document.body.addEventListener("click", this.closeMenu);} else {document.body.removeEventListener("click", this.closeMenu);}}},methods:{//强制刷新表格reload() {this.isRouterAlive = false;this.$nextTick(function () {this.isRouterAlive = true;});},onCellChange(indexTable, dataIndex, value) {//修改明细table数据const dataSource = [...this.dataSource];const target = dataSource.find((item, index) => index === indexTable);if (target) {this.$nextTick(() => {target[dataIndex] = value;this.dataSource = dataSource;this.reload();});}}}
}

EditableCell.vue

<template><div class="editable-cell"><div v-if="editable" class="editable-cell-input-wrapper"><a-input :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check" /></div><div v-else class="editable-cell-text-wrapper" @click="edit"><div>{{ value || '&nbsp;' }}</div><!-- <a-icon type="edit" class="editable-cell-icon" @dblclick="edit" /> --></div></div>
</template>

export default {props:{text: String,col: {type: String,default: ''},index: Number,dataSource: {type: Object,default: () => { }},record: {type: Object,default: () => { }},}data(){return {value: this.text,editable: false,}},methods: {edit() {//编辑this.editable = true;this.$nextTick(() => {this.$refs.focusid.focus();});},handleChange(e) {const value = e.target.value;this.value = value;},check() {this.editable = false;if (this.value) {//返回给父组件做数据更改this.$emit("change", this.value);}},}
}

总结

需求就是直接在表格中修改数据，然后还有一些表格中需要添加一些组件，在这里不做记录了。下面贴两张图
效果图

输入框中可能还需要有一些其他选择的数据

ant-bable实现表格输入数据相关推荐

antd 表格树如何展开_React Ant Design树形表格的复杂增删改
React Ant Design树形表格的复杂增删改最近由于业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中碰见了很多坑,不少功能antd只写了初步的功能,更为细化 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
ant vue table表格隐藏列
ant vue table表格隐藏列随手记一下
ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
ant中table表格的多选框如何清空
项目需求:表格前加一列多选框,可以做多选和提交,还可以在提交后.重置或者翻页后对多选框清空使用的组件是ant中下的可操作选择的table:这样我们就知道复选框选中的那些数据id,其实就是select ...
ant design table 表格空白
据我查找,情况可能有如下几点: 1.table设置了tableLayout:fixed,导致每个格子的css的color:transparent改变了原来的颜色 2.table的columns设置了e ...
Ant Design Vue 表格内编辑（附完整源码及效果图）
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...
vue ant design a-table表格标题（title）添加icon样式
在表格添加icon,且不破坏排序问题. //标题<span slot="title_slot" >标题显示<a-tooltip title="这里是标题 ...
Ant Design之表格动态合并行
在web开发中,表格的行合并是一个很常见的需求.antd也提供了这种功能,但是文档中的示例代码却和我想象中的相差甚远,如下所示,它是通过一种很笨的办法实现的行合并.这样当表格的数据源是动态获取的,我们 ...

ant-bable实现表格输入数据

table.vue

EditableCell.vue

总结

ant-bable实现表格输入数据相关推荐

最新文章

热门文章