单元的点击下拉，点击输入，点击picker

1. 点击输入input（EditCell）

<!--
 * @Author: wangzhendong
 * @Descripttion: file content
 * @Date: 2021-09-17 09:29:31
 * @LastEditors: wangzhendong
 * @LastEditTime: 2021-10-09 10:11:24
 * @FilePath: \amIrpWeb_project\src\pc\views\BondTrade\PmIntentInstruction\components\EditCell.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"
      >
        <span v-if="value">
          {{ value }}
        </span>
        <span v-else class="ownPlaceHolder">{{ ownPlaceHolder }}</span>
      </div>
    </el-tooltip> -->


        <div
        tabindex="0"
        class="cell-content"
        :class="{ 'edit-enabled-cell': canEdit }"
        @keyup.enter="onFieldClick"
      >
        <span v-if="value">
          {{ value }}
        </span>
        <span v-else class="ownPlaceHolder">{{ ownPlaceHolder }}</span>
      </div>
    <component
      :is="editableComponent"
      v-if="editMode || showInput"
      ref="input"
      @keyup.enter.native="onInputExit"
      @change="onInputChange"
      v-on="listeners"
      v-bind="$attrs"
      v-model="model"
      style="width: 100%"
    >
      <slot name="edit-component-slot"></slot>
    </component>
  </div>
</template>
<script>
import _ from "lodash";
export default {
  name: "SjEditCell",
  inheritAttrs: false,
  props: {
    value: {
      type: [String, Number],
      default: ""
    },
    tooltipContent: {
      type: String,
      default: "点击编辑"
    },
    tooltipDelay: {
      type: Number,
      default: 500
    },
    tooltipPlacement: {
      type: String,
      default: "top-start"
    },
    showInput: {
      type: Boolean,
      default: false
    },
    editableComponent: {
      type: String,
      default: "hr-input"
    },
    closeEvent: {
      type: String,
      default: "blur"
    },
    canEdit: {
      type: Boolean,
      default: true
    },
    jyxtCallBack: {
      type: Function,
      required: false
    },
    ownPlaceHolder: {
      type: String,
      default: "请输入"
    },
    selectOptions: {
      type: Array
    }
  },
  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(() => {
          const inputRef = this.$refs.input;
          if (inputRef && inputRef.focus) {
            inputRef.focus();
            if (this.$props.Cb) {
              this.model = this.$props.cb();
            }
          }
        });
      }
    },
    onInputExit() {
      this.editMode = false;
    },
    onInputChange(val) {
      this.$emit("input", val);
    }
  }
};
</script>

<style scoped>
.cell-content {
  padding-left: 5px;
  border: 1px solid transparent;
}
.edit-enabled-cell {
  cursor: pointer;
  height: 24px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ownPlaceHolder {
  display: flex;
  align-items: center;
  color: #c0c4cc !important;
  font-size: 12px;
}
</style>

1.1 使用

  {
          prop: "name",
          label: "姓名",
          minWidth: 110,
          width: 110,
          sort: true,
          cellStyle: ({ data }) => {
            let bc = {};
            if (
              this.hasSessionFlag &&
              data.existErrorColumnList &&
              data.existErrorColumnList.includes("name")
            ) {
              bc = { backgroundColor: "#FFCCC7" };
            }
            return bc;
          },
          render: (h, { row }) => {
            const flag =
              this.hasSessionFlag &&
              row.existErrorColumnList &&
              row.existErrorColumnList.includes("name");
            return (
              <div title={row.name}>
                <EditCell
                  slot-scope={row}
                  v-model={row.name}
                  showName={row.name}
                  placeholder="请输入"
                  size="mini"
                  editable-component="el-input"
                  tooltipContent="点击编辑"
                  ownPlaceHolder=""
                  canEdit={flag}
                />
              </div>
            );
          }
        }

2. 点击出现picker（EditPicker）

<!--
 * @Author: wangzhendong
 * @Descripttion: file content
 * @Date: 2021-10-13 14:46:26
 * @LastEditors: wangzhendong
 * @LastEditTime: 2021-10-18 14:51:20
 * @FilePath: \amIrpWeb_project\src\pc\views\BondTrade\PmIntentInstruction\components\EditSelectCell.vue
-->
<template>
  <div @click="onFieldClick" class="edit-cell">
    <div
      tabindex="0"
      class="cell-content"
      :class="{ 'edit-enabled-cell': canEdit }"
      @keyup.enter="onFieldClick"
    >
      <span v-if="showName"> {{ showName }}</span>
      <span v-else class="ownPlaceHolder">{{ ownPlaceHolder }}</span>
    </div>
    <el-date-picker
      placeholder="选择日期"
      size="mini"
      type="date"
      value-format=	"yyyy-MM-dd"
      v-if="editMode || showInput"
      filterable
      ref="input"
      @change="changeVal"
      @blur="blur"
      v-bind="$attrs"
      v-model="model"
      style="width: 100%"
    ></el-date-picker>
  </div>
</template>
<script>
import _ from "lodash";
import EventBus from "@/pc/eventBus";
export default {
  name: "SjEditSelectCell",
  inheritAttrs: false,
  props: {
    value: {
      type: [String, Number, Array],
      default: ""
    },
    showName: {
      type: [String, Number, Array]
    },
    tooltipContent: {
      type: String,
      default: "点击编辑"
    },
    tooltipDelay: {
      type: Number,
      default: 500
    },
    tooltipPlacement: {
      type: String,
      default: "top-start"
    },
    showInput: {
      type: Boolean,
      default: false
    },
    closeEvent: {
      type: String,
      default: "blur"
    },
    canEdit: {
      type: Boolean,
      default: true
    },
    cb: {
      type: Function,
      required: false
    },
    ownPlaceHolder: {
      type: String,
      default: "请输入"
    },
    selectOptions: {
      type: Array
    },
    row: {
      type: Object
    },
    cellType: {
      type: String
    },
    checkMore: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      test: "",
      loading: false,
      localOptions: [],
      editMode: false
    };
  },
  computed: {
    options() {
      return this.selectOptions?.length > 0 ? this.selectOptions : this.localOptions;
    },
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    onFieldClick() {
      if (this.canEdit) {
        this.editMode = true;
        this.$nextTick(() => {
          const inputRef = this.$refs.input;
          if (inputRef && inputRef.focus) {
            inputRef.focus();
            if (this.$props.cb) {
              this.$props.cb();
            }
          }
          this.$emit("cellClick");
        });
      }
    },
    changeVal(val) {
      this.$emit("input", val);
      this.editMode = false;
    },
    blur() {
      setTimeout(() => {
        this.editMode = false;
      }, 100);
    }
  }
};
</script>

<style scoped>
.cell-content {
  padding-left: 5px;
  border: 1px solid transparent;
}
.edit-enabled-cell {
  cursor: pointer;
  height: 24px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ownPlaceHolder {
  display: flex;
  justify-content: center;
  color: #c0c4cc !important;
  font-size: 12px;
}
</style>

2.1 使用

  {
          prop: "serviceDate",
          label: "服务时间",
          minWidth: 110,
          width: 110,
          sort: true,
          cellStyle: ({ data }) => {
            let bc = {};
            if (
              this.hasSessionFlag &&
              data.errorColumnList &&
              data.errorColumnList.includes("serviceDate")
            ) {
              bc = { backgroundColor: "#FFCCC7" };
            }
            return bc;
          },
          render: (h, { row }) => {
            const flag =
              this.hasSessionFlag &&
              row.errorColumnList &&
              row.errorColumnList.includes("serviceDate");
            return (
              <div title={row.phoneCode}>
                <EditPicker
                  slot-scope={row}
                  v-model={row.serviceDate}
                  showName={row.serviceDate}
                  placeholder="请输入"
                  size="mini"
                  editable-component="el-input"
                  tooltipContent="点击编辑"
                  ownPlaceHolder=""
                  canEdit={flag}
                />
              </div>
            );
          }
        }

2.12 效果