elementui制作可编辑表格行

当点击某一行的编辑按钮时,单元格变成可输入的状态,点击保存之后变成纯展示状态。

效果如下:

elementui制作可编辑表格行_第1张图片

 步骤: 

(1)可编辑可展示的单元格需要两个状态,一个使用input标签包裹,一个使用span标签包裹,二者呈现互斥的状态,通过v-if绑定一个值让他们取反显示

      
        
      

(2)操作按钮也需要两个,一个编辑按钮,一个保存按钮,二者呈现互斥的状态,通过v-if绑定一个值让他们取反显示

      
        
      

(3)通过this.$set方法改变这个值,值isshow初始值为空数组,是一个全局的变量

  data() {
    return {
      // 控制参数表格输入显示
      isshow: [],
    };
  methods: {
    /**
     * @description: 编辑单行数参数
     * @param {index} 当前行索引值
     * @return void
     */
    handleEdit(index) {
      this.$set(this.isshow, index, true);
    },

    /**
     * @description: 保存单行参数
     * @param {index} 当前行索引值
     * @return void
     */
    handelCheck(index) {
      this.$set(this.isshow, index, false);
    },
  },

你可能感兴趣的:(elementui,vue.js,前端)