标签：vue false default 编辑表格 required ui scope prop type

vue element-ui 可编辑表格

轻量级
提供 slot-scope=“scope” 字段名 会提取 prop prop 没有 就需要提供 change-filed-name=“name” name 就是 字段名

   <el-table-column prop="number" label="数字" width="180">
        <template slot-scope="scope">
          <edit-input-number :scope="scope"/>
        </template>
      </el-table-column>

editInput.vue

<template>
  <div @dblclick="dbClickMethod" style="height:36px;">
    <!--  可编写 表格 原理
       1. 提供 行数据
       2. 是否可以开启 isEdit
       3. 双击编写
       4. 回车 或 失去 焦点 @blur -->
    <span v-if="!isShowInput" style="display: block;width: 100%;height: 100%;padding-top: 6px">{{
        (scope.row)[filedName]
      }}</span>

    <el-input size="medium" :style="{height:height,width:width}" @keyup.enter.native="isShowInput=false"
              v-model=" (scope.row)[filedName]" :placeholder="placeholder" v-show="isShowInput" @change="change"
              @blur="isShowInput = false" ref="inputRef"/>
  </div>
</template>

<script>
//可编写表格
export default {
  props: {
    //是否可以开启
    isEdit: {
      type: Boolean,
      default: true,
      required: false,
    },
    //slot-scope="scope"  element-ui提供的 对象
    scope: {
      type: Object,
      required: true,
    },
    //要改变 字段 的 名称
    prop: {
      type: String,
      default: undefined,
      required: false,
    },

    //提供可描述输入的信息
    placeholder: {
      type: String,
      default: "",
      required: false,
    },

    width: {
      type: String,
      default: "100%",
      required: false,
    },
    height: {
      type: String,
      default: "100%",
      required: false,
    }

  },
  data() {
    return {
      isShowInput: false,
      //字段名
      filedName: undefined,
    }
  },
  created() {
    //确定 字段 名
    this.filedName = this.prop? this.prop: this.scope.column.property;
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    change(val) {
      this.$emit("change", val);
    },

    dbClickMethod() {
      if (this.isEdit) {

        this.isShowInput = true;
        //进行 获取焦点
        this.$nextTick(() => {
          this.$refs.inputRef.focus()
        })
      }
    }

  }
}
</script>

<style scoped>

</style>

editInputNumber.vue

<template>
  <div @dblclick="dbClickMethod" style="height:36px;">
    <!--  可编写 表格 原理
       1. 提供 行数据
       2. 是否可以开启 isEdit
       3. 双击编写
       4. 回车 或 失去 焦点 @blur -->
    <span v-if="!isShowInput" style="display: block;width: 100%;height: 100%;padding-top: 6px">{{
        (scope.row)[filedName]
      }}</span>

    <el-input-number v-focus ref="inputNumberRef" size="medium" v-show="isShowInput" @blur="isShowInput = false"
                     @keyup.enter.native="isShowInput=false"
                     v-model="(scope.row)[filedName]" :controls="controls"
                     :style="{height:height,width:width}" :controls-position="controlsPosition" @change="change"
                     :min="min" :max="max" :precision="precision" :step="step"/>
  </div>
</template>

<script>
//可编写表格
export default {
  props: {
    //是否可以开启
    isEdit: {
      type: Boolean,
      default: true,
      required: false,
    },
    //slot-scope="scope"  element-ui提供的 对象
    scope: {
      type: Object,
      required: true,
    },
    //要改变 字段 的 名称
    prop: {
      type: String,
      default: undefined,
      required: false,
    },
    //宽度
    width: {
      type: String,
      default: "100%",
      required: false,
    },
    //高度
    height: {
      type: String,
      default: "100%",
      required: false,
    },

    //是否有控制器
    controls: {
      type: Boolean,
      default: false,
      required: false,
    },

    //控制器位置
    controlsPosition: {
      type: String,
      default: undefined,
      required: false,
    },

    //最小值
    min: {
      type: Number,
      default: 1,
      required: false,
    },

    //最大值
    max: {
      type: Number,
      default: 9999999,
      required: false,
    },
    //精确小数点后几位
    precision: {
      type: Number,
      default: undefined,
      required: false,
    },
    //每次控制器新增数
    step: {
      type: Float32Array,
      default: undefined,
      required: false,
    },

  },
  data() {
    return {
      isShowInput: false,
      //字段名
      filedName: undefined,
    }
  },
  created() {
    //确定 字段 名
    this.filedName = this.prop? this.prop: this.scope.column.property;
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
  methods: {
    change(val) {

      this.$emit("change", val);
    },
    dbClickMethod() {
      if (this.isEdit) {

        this.isShowInput = true;

        //进行 加载好后 获取焦点
        this.$nextTick(() => {
          this.$refs.inputNumberRef.focus()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>

设置为全局 组件

index.js

import editInput from "./editInput";
import editInputNumber from "./editInputNumber";


const customTemplate = {
  install: function (Vue) {
    Vue.component('edit-input', editInput) //注册全局组件
    Vue.component('edit-input-number', editInputNumber) //注册全局组件

  }
}

export default customTemplate

main.js

import customTemplate from "./views/customTemplate"
Vue.use(customTemplate);

标签：vue,false,default,编辑表格,required,ui,scope,prop,type
来源： https://blog.csdn.net/qq_44986537/article/details/117731015

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。