c/c++语言开发共享element-ui直接在表格中点击单元格编辑

目录

• 实现效果
• 实现代码

  <template>    <div class="editcell">      <div class="canedit" v-if="canedit" @click="beginedit">        <label v-show="!editstatus">          <span v-if="this.value!== null && this.value !== undefined && this.value !== ''">{{ value }}{{this.suffix}}</span>          <span v-else style="padding-left: 100%;padding-top: 100%;"/>        </label>        <label v-show="editstatus">          <input            type="text"            class="inputclass"            ref="input"            v-on:keyup.13="losefocus"            :value="value"            @blur="losefocus"          />        </label>      </div>        <label class="cannotedit" v-else>        <span>{{ value }}{{ suffix }}</span>      </label>    </div>  </template>    <script>  export default {    name: "editcell",    props: {      /**       * 绑定值       */      value: {        required: true      },      /**       * 是否可编辑       */      canedit: {        type: boolean,        default: true      },      /**       * 格式化函数       */      formatdata: {        type: function,        default: value => {          return value;        }      },      /**       * 编辑后事件       */      afteredit: {        type: function,        default: () => {}      },      /**       * 是否初始格式化       */      initformat: {        type: boolean,        default: false      },      suffix: {        default: ""      }    },    data() {      return {        editstatus: false,        showdata: "",        defaultdata: "",        timeout: null      };    },    methods: {      /**       * 单击开始编辑       */      beginedit() {        this.editstatus = true;        settimeout(() => {          this.$refs.input.focus();        }, 1);      },        /**       * @param {event} event       * 丢失焦点关闭编辑状态，并保存数据       */      losefocus(event) {        let value = this.formatdata(event.target.value);        this.editdata(value);        this.closeeditstatus(value);        this.afteredit(value);      },        /**       * 发布input事件修改数据       * @param value       */      editdata(value) {        this.$emit("input", value);      },        /**       * 关闭编辑状态       * @param value       */      closeeditstatus(value) {        this.editstatus = false;      },      /**       * 初始格式化数据       */      initdata() {        let newvalue = this.formatdata(this.value);        this.$emit("input", newvalue);      }    },    mounted() {      if (this.initformat) {        this.initdata();      }    },    watch: {      'value': function(newval){        this.$emit("input", this.formatdata(newval));      }    }  };  </script>    <style scoped>  .editcell {    height: 100%;    width: 100%;  }  .inputclass {    height: 30px;    width: 100%;    background-color: #fff;    border-radius: 4px;    border: 1px solid #dcdfe6;    color: #606266;    display: inline-block;    font-size: inherit;    line-height: 30px;    outline: 0;    padding: 0 15px;    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);    overflow: visible;    touch-action: manipulation;    margin: 0;  }  </style>    

  import editcell from "@/components/editcell/editcell";  components: { editcell},     <el-table-column      v-for="item in tablecolumn"        :prop="item.dataindex"        :label="item.title"        :width="item.width"        :align="item.align"        :key="item.id"        :fixed="item.fixed"    >    	  //此处调用自定义组件（dataindex 为表头数据中字段，相当于 展示表头 老师对应的 teacher名称）        <template slot-scope="scope">            <span v-if="item.dataindex !== 'batchinvest' && item.dataindex !== 'remark'">{{scope.row[item.dataindex]}}</span>            // 若需要格式化数据 可设置 :format-data="formatfun" formatfun此方法在当前页methods中定义即可            <edit-cell v-else v-model="scope.row[item.dataindex]" :can-edit="true"/>        </template>        <el-table-column            v-for="item2 in item.children"            :prop="item2.dataindex"            :label="item2.title"            :width="item2.width"            :align="item2.align"            :key="item2.id"            :fixed="item2.fixed"        >        </el-table-column>    </el-table-column>