ElementUI table 实现单元格可编辑

最新推荐文章于 2024-04-22 17:32:23 发布
最新推荐文章于 2024-04-22 17:32:23 发布
阅读量8.6k 收藏 28
点赞数 4
分类专栏： 前端-ElementUI 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43159612/article/details/116190860
版权

优雅的elementUI table 单元格可编辑实现方法

最近在做可编辑特定列的单元格的elementUI table，看了N多的开源、文章，找到一个很优雅的实现方式，分享给大家。
PS:单元格可编辑的table，用英文搜索：Inline editable table with ElementUI 会得到高质量结果。

效果图-1

对应代码

APP.vue

<template>
  <div id="app">
      <div style="margin-bottom: 30px">
        <el-switch
            style="display: block"
            v-model="editModeEnabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="Edit enabled"
            inactive-text="Edit disabled">
          </el-switch>
      </div>
       <el-table
      :data="gridData"
      style="width: 100%">
      <el-table-column
        label="Name"
        min-width="180">
        <editable-cell slot-scope="{row}"
                       :can-edit="editModeEnabled"
                       v-model="row.name">
          <span slot="content">{{row.name}}</span>
        </editable-cell>
      </el-table-column>

      <el-table-column
        min-wwidth="150"
        label="Gender">

         <editable-cell 
         slot-scope="{row}" 
         editable-component="el-select"
         :can-edit="editModeEnabled"
         close-event="change"
         v-model="row.gender">
         
          <el-tag size="medium" 
                  :type="row.gender === 'M' ? 'primary' : 'danger'" 
                  slot="content">
                  {{row.gender === 'M' ? 'Male': 'Female'}}
          </el-tag>

          <template slot="edit-component-slot">
            <el-option value="M" label="Male"></el-option>
            <el-option value="F" label="Female"></el-option>
          </template>
        </editable-cell>
        
      </el-table-column>


      <el-table-column
        label="Birth Date"
        min-width="250">
         <editable-cell 
         slot-scope="{row}" 
         :can-edit="editModeEnabled"
         editable-component="el-date-picker"
         format="yyyy-MM-dd"
         value-format="yyyy-MM-dd"
         v-model="row.date">
          <span slot="content">{{row.date}}</span>
        </editable-cell>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import EditableCell from "./components/EditableCell.vue";

export default {
  name: "App",
  components: {
    EditableCell
  },
  data() {
    return {
      editModeEnabled: false,
      gridData: [
        {
          date: "2016-05-03",
          name: "Tom",
          gender: "M"
        },
        {
          date: "2016-05-02",
          name: "Lisa",
          gender: "F"
        },
        {
          date: "2016-05-04",
          name: "Jon",
          gender: "M"
        },
        {
          date: "2016-05-01",
          name: "Mary",
          gender: "F"
        }
      ]
    };
  }
};
</script>

<style>
.edit-cell {
  min-height: 35px;
  cursor: pointer;
}
</style>

EditableCell.vue

<template>
  <div @click="onFieldClick" class="edit-cell">
    <el-tooltip v-if="!editMode && !showInput"
                :placement="toolTipPlacement"
                :open-delay="toolTipDelay"
                :content="toolTipContent">
      <div tabindex="0" 
           class="cell-content"
           :class="{'edit-enabled-cell': canEdit}"
           @keyup.enter="onFieldClick">
        <slot name="content"></slot>
      </div>

    </el-tooltip>
    <component :is="editableComponent"
               v-if="editMode || showInput"
              ref="input"
              @focus="onFieldClick"
              @keyup.enter.native="onInputExit"
              v-on="listeners"
              v-bind="$attrs"
              v-model="model">
        <slot name="edit-component-slot"></slot>
    </component>
  </div>
</template>
<script>
export default {
  name: "editable-cell",
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ""
    },
    toolTipContent: {
      type: String,
      default: "Click to edit"
    },
    toolTipDelay: {
      type: Number,
      default: 500
    },
    toolTipPlacement: {
      type: String,
      default: "top-start"
    },
    showInput: {
      type: Boolean,
      default: false
    },
    editableComponent: {
      type: String,
      default: "el-input"
    },
    closeEvent: {
      type: String,
      default: "blur"
    },
    canEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editMode: false
    };
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    listeners() {
      return {
        [this.closeEvent]: this.onInputExit,
        ...this.$listeners
      };
    }
  },
  methods: {
    onFieldClick() {
      if (this.canEdit) {
        this.editMode = true;
        this.$nextTick(() => {
          let inputRef = this.$refs.input;
          if (inputRef && inputRef.focus) {
            inputRef.focus();
          }
        });
      }
    },
    onInputExit() {
      this.editMode = false;
    },
    onInputChange(val) {
      this.$emit("input", val);
    }
  }
};
</script>
<style>
.cell-content {
  min-height: 40px;
  padding-left: 5px;
  padding-top: 5px;
  border: 1px solid transparent;
}
.edit-enabled-cell {
  border: 1px dashed #409eff;
}
</style>

效果图-2

对应代码

APP.vue

<template>
  <div id="app">
      <el-tooltip content="Click on any of the cells or on the edit button to edit content">
       <i class="el-icon-info"></i>
      </el-tooltip>
       <el-table
      :data="gridData"
      style="width: 100%">

       <el-table-column
        label="Operations"
        min-width="180">
        <template slot-scope="{row, index}">
         <el-button icon="el-icon-edit"
          @click="setEditMode(row, index)">
        </el-button>
         <el-button type="success" icon="el-icon-check"
          @click="saveRow(row, index)">
        </el-button>
        </template>
      </el-table-column>


      <el-table-column
        label="Name"
        min-width="180">
        <editable-cell :show-input="row.editMode" slot-scope="{row}" v-model="row.name">
          <span slot="content">{{row.name}}</span>
        </editable-cell>
      </el-table-column>

      <el-table-column
        min-wwidth="150"
        label="Gender">

         <editable-cell 
         :show-input="row.editMode"
         slot-scope="{row}" 
         editable-component="el-select"
         close-event="change"
         v-model="row.gender">
         
          <el-tag size="medium" 
                  :type="row.gender === 'M' ? 'primary' : 'danger'" 
                  slot="content">
                  {{row.gender === 'M' ? 'Male': 'Female'}}
          </el-tag>

          <template slot="edit-component-slot">
            <el-option value="M" label="Male"></el-option>
            <el-option value="F" label="Female"></el-option>
          </template>
        </editable-cell>
        
      </el-table-column>


      <el-table-column
        label="Birth Date"
        min-width="250">
         <editable-cell 
         :show-input="row.editMode"
         slot-scope="{row}" 
         editable-component="el-date-picker"
         format="yyyy-MM-dd"
         value-format="yyyy-MM-dd"
         v-model="row.date">
          <span slot="content">{{row.date}}</span>
        </editable-cell>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import EditableCell from "./components/EditableCell.vue";

export default {
  name: "App",
  components: {
    EditableCell
  },
  data() {
    return {
      gridData: [
        {
          date: "2016-05-03",
          name: "Tom",
          gender: "M"
        },
        {
          date: "2016-05-02",
          name: "Lisa",
          gender: "F"
        },
        {
          date: "2016-05-04",
          name: "Jon",
          gender: "M"
        },
        {
          date: "2016-05-01",
          name: "Mary",
          gender: "F"
        }
      ]
    };
  },
  methods: {
    setEditMode(row, index) {
      row.editMode = true;
    },
    saveRow(row, index) {
      row.editMode = false;
    }
  },
  mounted() {
    this.gridData = this.gridData.map(row => {
      return {
        ...row,
        editMode: false
      };
    });
  }
};
</script>

<style>
.edit-cell {
  min-height: 35px;
  cursor: pointer;
}
</style>

EditableCell.vue

<template>
  <div @click="onFieldClick" class="edit-cell">
    <el-tooltip v-if="!editMode && !showInput"
                :placement="toolTipPlacement"
                :open-delay="toolTipDelay"
                :content="toolTipContent">
      <div tabindex="0" @keyup.enter="onFieldClick">
        <slot name="content"></slot>
      </div>

    </el-tooltip>
    <component :is="editableComponent"
               v-if="editMode || showInput"
              ref="input"
              @focus="onFieldClick"
              @keyup.enter.native="onInputExit"
              v-on="listeners"
              v-bind="$attrs"
              v-model="model">
        <slot name="edit-component-slot"></slot>
    </component>
  </div>
</template>
<script>
export default {
  name: "editable-cell",
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: ""
    },
    toolTipContent: {
      type: String,
      default: "Click to edit"
    },
    toolTipDelay: {
      type: Number,
      default: 500
    },
    toolTipPlacement: {
      type: String,
      default: "top-start"
    },
    showInput: {
      type: Boolean,
      default: false
    },
    editableComponent: {
      type: String,
      default: "el-input"
    },
    closeEvent: {
      type: String,
      default: "blur"
    }
  },
  data() {
    return {
      editMode: false
    };
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    listeners() {
      return {
        [this.closeEvent]: this.onInputExit,
        ...this.$listeners
      };
    }
  },
  methods: {
    onFieldClick() {
      this.editMode = true;
      this.$nextTick(() => {
        let inputRef = this.$refs.input;
        if (inputRef) {
          inputRef.focus();
        }
      });
    },
    onInputExit() {
      this.editMode = false;
    },
    onInputChange(val) {
      this.$emit("input", val);
    }
  }
};
</script>
<style>

</style>

在线查看：原项目地址

本文来源：https://segmentfault.com/a/1190000017481742

两点自产

动态表头 和 指定列可编辑

父组件

<template>
 <div id="app">

   <el-table
             :data="gridData"
             style="width: 100%"
             border>
     <!--      动态列头-->
     <el-table-column v-for="(col,index) in columnHead" :prop="col.prop" :label="col.label" :key="col.prop">

       <editable-cell :show-input="row.editMode" :column-num="index" slot-scope="{row}" v-model="row[col.prop]">
         <span slot="content">{{ row[col.prop] }}</span>
       </editable-cell>

     </el-table-column>
     <el-table-column
                      fixed="right"
                      label="操作"
                      width="100">
       <template slot-scope="scope">
         <el-tooltip class="item" effect="dark" content="点击保存" placement="right">
           <el-button @click="submit(scope.row)" type="success" size="small" round icon="el-icon-check"></el-button>
         </el-tooltip>
       </template>
     </el-table-column>
   </el-table>

 </div>
</template>

<script>
import EditableCell from '@/tlw-components/tlw_modules/TlwTableByDxcUmd/EditableCell'

export default {
 name: 'TlwTableByDxcUmd',
 props: ['params', 'element', 'value', 'options', 'state', 'edit', 'remote', 'model'],
 components: {
   EditableCell
 },

 watch: {
   value (val) {
     this.defaultData(val)
     // if (val) this.defaultData()
   },
   dataModel (val) {
     // this.$emit('input', val)
   }
 },

 data () {
   return {
     gridData: [
       {
         date: '2016-05-03',
         name: 'Tom',
         gender: 'M'
       },
       {
         date: '2016-05-02',
         name: 'Lisa',
         gender: 'F'
       },
       {
         date: '2016-05-04',
         name: 'Jon',
         gender: 'M'
       },
       {
         date: '2016-05-01',
         name: 'Mary',
         gender: 'F'
       }
     ],
     columnHead: [
       {
         prop: 'date',
         label: '日期'
       },
       {
         prop: 'name',
         label: '姓名'
       },
       {
         prop: 'gender',
         label: '性别'
       }
     ],
     url: ''
   }
 },
 methods: {
   submit (row) {

     console.log(this.url)
     console.log(this.gridData)
     console.log(this.columnHead)
     let T$ = this.remote ? this.remote.T$ : null,
       requestUtil = T$ ? T$.requestUtil : null
     if (!requestUtil) return
     console.log(requestUtil, row)
     //如果row.itemvalue不等于数字，且小于1或大于100，不提交
     if (typeof row.itemvalue == "string") {
       row.itemvalue = Number(row.itemvalue)
     }
     console.log(T$.getUserInfo().accountId)
     if (row.itemvalue && row.itemvalue > 0 && row.itemvalue <= 100) {
       row.recordid = T$.getUserInfo().accountId
       requestUtil.request(this.url, "save", row).then(function (resp) {

         alert('保存成功')
       })
     } else {
       alert("分值需为0到100的数字")
     }
   },
   defaultData (val) {
     if (!Array.isArray(val) || val.length <= 0) return
     let data = JSON.parse(JSON.stringify(val[0]))
     data.forEach(row => {
       row.editMode = false
     })
     console.log(data)
     this.gridData = data
     this.columnHead = val[1]
     this.url = val[2]

   }
 },
 mounted () {
   this.defaultData(this.value)
 },
 computed: {

 },
 created () {

 }
}
</script>

<style>
.edit-cell {
 min-height: 35px;
 cursor: pointer;
}
</style>

子组件

<template>
  <div @click="onFieldClick" class="edit-cell">
    <el-tooltip
      v-if="!editMode && !showInput"
      :placement="toolTipPlacement"
      :open-delay="toolTipDelay"
      :content="toolTipContent">
      <div tabindex="0" @keyup.enter="onFieldClick">
        <slot name="content"></slot>
      </div>

    </el-tooltip>
    <component
      :is="editableComponent"
      v-if="editMode || showInput"
      ref="input"
      @focus="onFieldClick"
      @keyup.enter.native="onInputExit"
      v-on="listeners"
      v-bind="$attrs"
      v-model="model">
      <slot name="edit-component-slot"></slot>
    </component>
  </div>
</template>
<script>
    export default {
        name: 'EditableCell',
        inheritAttrs: false,
        props: {
            value: {
              default:''
            },
            toolTipContent: {
                type: String,
                default: 'Click to edit'
            },
            toolTipDelay: {
                type: Number,
                default: 500
            },
            toolTipPlacement: {
                type: String,
                default: 'top-start'
            },
            showInput: {
                type: Boolean,
                default: false
            },
            editableComponent: {
                type: String,
                default: 'el-input'
            },
            closeEvent: {
                type: String,
                default: 'blur'
            },
            columnNum: {
              type: Number,
              default: 0
            }
        },
        data () {
            return {
                editMode: false
            }
        },
        computed: {
            model: {
                get () {
                    return this.value
                },
                set (val) {
                    this.$emit('input', val)
                }
            },
            listeners () {
                return {
                    [this.closeEvent]: this.onInputExit,
                    ...this.$listeners
                }
            }
        },
        methods: {
            onFieldClick () {
              if(this.columnNum === 1 || this.columnNum === 2){
                this.editMode = true
                this.$nextTick(() => {
                  const inputRef = this.$refs.input
                  if (inputRef) {
                    inputRef.focus()
                  }
                })
              }

            },
            onInputExit () {
                this.editMode = false
            },
            onInputChange (val) {
                this.$emit('input', val)
            }
        }
    }
</script>
<style>

</style>

在这里插入图片描述
在这里插入图片描述

Ivan丶艾凡
关注
  • 4
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+element-ui实现表格编辑
liaoxuewu的博客
07-24 8万+
两种实现方式 1、表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。 html中的代码： &amp;amp;amp;amp;amp;amp;lt;el...
elementui可编辑单元格_优雅的elementUI table 单元格可编辑实现方法
weixin_39785165的博客
12-21 353
最近在做可编辑特定列的单元格的elementUI table，看了N多的开源、文章，找到一个很优雅的实现方式，分享给大家。PS:单元格可编辑的table，用英文搜索：Inline editable table with ElementUI 会得到高质量结果。先上效果：APP.vue：style="display: block"v-model="editModeEnabled"active-colo...
vue element-ui实现table表格可编辑修改
weixin_43613849的博客
12-14 1万+
代码如下：点击编辑按钮可编辑当前行，点击保存可以保存当前行，可以结合业务需要，进一步修改 <template> <div class="st-table"> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot..
elementui制作可编辑表格行
super码力的博客
11-25 5921
elementui制作可编辑表格行，当点击某一行的编辑按钮时，单元格变成可输入的状态，点击保存之后变成纯展示状态
前端表格部分可编辑，部分不可以编辑
最新发布
qq_54524289的博客
04-22 229
非常重要的是实现不可以编辑效果，这代码很重要。
elementUI的table实现行内编辑的两种方法
mofeimo110的博客
05-07 1万+
一、在行数据中设置一个属性，用来区分当前行或者当前列是否在进行修改，使用v-show实现 在行内添加button，并直接操作当前数据对象，变更其值用来控制当前行或当前列是否修改，注意看几个button的click事件 如果在表格外部使用按钮操作，则定义一个method，传递行数据在table原始数据中的index，在method中操作对应index的数据。 <template> <div> <el-table :data="list"> &l
优雅的elementUI table单元格可编辑实现方法详解
10-17
在本文中，我们将详细探讨如何优雅地实现 ElementUI Table 的单元格可编辑功能。这个功能允许用户在表格的特定单元格内进行编辑，提高交互性和用户体验。 首先，我们看到在 `APP.vue` 文件中，使用了 `<el-switch>`...
bootstrap table实现单击单元格可编辑功能
08-31
《Bootstrap Table实现单击单元格可编辑功能详解》 Bootstrap Table 是一款基于Bootstrap框架的响应式表格插件，它提供了一系列强大的功能，如排序、筛选、分页等。而通过结合x-editable插件，我们可以进一步实现...
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUi 表格双击可编辑
我是一个酒鬼的博客
05-11 9559
ElementUi 表格双击可编辑，精确定位某一个单元格
elementUi 可编辑表格
Dimples_320的博客
10-17 299
elementUi 可编辑表格。
element-ui 表格实现单元格可编辑的示例
08-27
下面小编就为大家分享一篇element-ui 表格实现单元格可编辑的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3指令篇 -- 自定义vue指令，实现基于el-table的行内编辑功能 -- 支持使用element组件/自定义组件
qq_41068362的博客
06-26 3594
自定义vue指令，实现基于el-table实现的行内编辑。代码量减少，每个table自己维护自己的编辑方法，代码逻辑统一封装，使用也很方便。编辑时的表单支持直接使用element组件和自定义组件，通过createApp和h函数就行
vue中实现element-ui 表格的单元格编辑功能和单元格之间的计算
一点一滴
03-29 1万+
<el-table :data="list" max-height="700" border style="width: 100%" @cell-click="tabClick" :row-class-name="tableRowClassName" > <el-table-column ...
element-ui 单元格可编辑
weixin_42497122的博客
12-22 1126
element-ui 单元格可编辑 一、在使用 element-ui 时，一般都会用到表格组件，在使用过程中，有可能会遇到一种需求：双击任意单元格进行编辑 二、我的实现思路是这样： ​ 1、双击后单元格后，单元格能够输入内容 ​ 2、获取输入的内容，更新该单元格对应的数据 三、具体实现 1、让单元格更够输入，第一时间肯定想到的是输入框，其实还有一个 html 标签也能实现输入功能，就是我们最常见的 div，不过需要手动设置一个属性，即： <div contenteditable="true">&
element table表格点击单元格实现编辑
LONGLONGAGO_RU的博客
11-13 6019
<el-table :data="dataDetail.judgmentLetterDets" :row-class-name="tableRowClassName" border style="width: 100%" max-height="500px" @cell-click="tabCl...
Vue基于ElementUI实现Table可编辑/添加功能
qq_34639706的博客
01-21 2998
文章目录效果预览前端代码添...
【VUE】elementUI 表格点击单元格可编辑或选择
Dan的博客
03-07 3939
elementUI 表格点击单元格可编辑 这个有个博主写的很好，这里直接贴链接： https://codeantenna.com/a/tlfRACjxfU elementUI 表格点击单元格可选择 <el-table-column prop="name" label="名称" align="center" width="200px" show-overflow-tooltip> <template slot-scope="scope">
vue3 + Element Plus动态生成表格，并实现内容可编辑
热门推荐
ymzhao
03-07 5万+
基于 vue3 & element plus 的可编辑表格
elementui可编辑单元格_ElementUI 表格可编辑单元格
05-25
ElementUI的表格组件中，可以通过设置 `:editable="true"` 来开启单元格的可编辑模式。当单元格进入编辑模式时，会显示一个输入框，用户可以在输入框中修改单元格内容。用户完成编辑后，可以通过点击外部区域或按下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值