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

已于 2022-02-10 16:16:45 修改
阅读量1k 收藏
点赞数
分类专栏： vue 文章标签： elementui vue.js javascript
于 2022-01-26 13:45:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43340372/article/details/122699994
版权

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 效果

3.0 EditSelectCell（点击下拉）

<!--
 * @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">
    <!-- <el-tooltip
      v-if="!editMode && !showInput"
      :placement="tooltipPlacement"
      :open-delay="tooltipDelay"
      :content="tooltipContent"
    >
     
    </el-tooltip> -->

     <div
        tabindex="0"
        class="cell-content"
        :class="{ 'edit-enabled-cell': canEdit }"
        @keyup.enter="onFieldClick"
      >
        <span v-if="showName" class="show-name"> {{ showName }}</span>
        <span v-else class="ownPlaceHolder">{{ ownPlaceHolder }}</span>
      </div>
    <el-select
      placeholder="可搜索"
      :loading="loading"
      size="mini"
      v-if="editMode || showInput"
      filterable
      ref="input"
      @change="changeVal"
      @blur="blur"
      @visible-change="visibleChange"
      v-bind="$attrs"
      v-model="model"
      style="width: 100%"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { listPositionDictList } from "@/pc/api/ExternalEvaluate";
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);
      if (this.cellType === "position") {
        const data = this.localOptions.find(item => item.value == val)?.label;
        this.$emit("click", data);
      } else {
        
        this.$emit("click", val);
      }

      this.editMode = false;
    },
    blur() {
      setTimeout(() => {
        this.editMode = false;
      }, 100);
    },
    visibleChange(value) {
      if (this.cellType === "position" && value) {
        if (this.row.station) {
          this.listPositionDictList(this.row.station);
        } else {
          this.$message.warning("请先选择岗位");
        }
      }
    },

    // 根据岗位获取职务
    listPositionDictList(value) {
      this.loading = true;
      listPositionDictList({ parentId: value })
        .then(res => {
          if (res.length > 0) {
            this.localOptions = res.map(item => ({ label: item.caption, value: item.id }));
          } else {
            this.localOptions = [];
          }
          EventBus.$off("getPositionOption", this.localOptions);
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</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;
}
.show-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
</style>

 3.1 使用

  {
          prop: "stationName",
          label: "岗位",
          sort: true,
          minWidth: 110,
          width: 110,
          cellStyle: ({ data }) => {
            let bc = {};
            if (
              this.hasSessionFlag &&
              data.existErrorColumnList &&
              data.existErrorColumnList.includes("station")
            ) {
              bc = { backgroundColor: "#FFCCC7" };
            }
            return bc;
          },
          render: (h, { row }) => {
            const flag =
              this.hasSessionFlag &&
              row.existErrorColumnList &&
              row.existErrorColumnList.includes("station");
            return (
              <div title={row.stationName}>
                <EditSelectCell
                  v-model={row.station}
                  showName={row.stationName}
                  placeholder="请输入"
                  size="mini"
                  editable-component="el-input"
                  tooltipContent="点击编辑"
                  ownPlaceHolder=""
                  selectOptions={this.stationOption}
                  onClick={() => {
                    row.stationName = this.stationOption.find(
                      item => item.value == row.station
                    )?.label;
                  }}
                  canEdit={flag}
                />
              </div>
            );
          }
        }

3.3 效果

 

好喝的西北风
关注
专栏目录
Android开源经典项目
Tamic （大白）
09-13 5720
Android开源项目大全，包括经典个人博客，组织和开源项目
微信小程序开发注意指南和优化实践
weixin_43966128的博客
08-05 398
微信小程序开发注意指南和优化实践 一、WXML 不要换行写，有空格不行 微信开发者工具不会对代码进行trim操作，如果代码中换行，页面也直接换行。 wx:if vs hidden 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。 图片处理 1.大图片也会造成页面切换的卡顿 有一部分小程序会在页面中引用大图片，在页面后退切换中会出现掉帧卡顿的情况。 2.图片占容量 代码包限制
模拟用户点击输入，实现自动点击输入
02-23
实现自动点击输入，模拟用户操作，代码有注释，内有文档说明。
input浏览器自动填充解决，input填充后el-date-picker自动触发出现解决
唐屁屁
09-01 1772
input浏览器自动填充解决，input填充后el-date-picker自动触发出现解决
elementUI时间选择器(el-date-picker)输入格式的转换与自定义
热门推荐
weixin_44490109的博客
03-10 1万+
目录1、背景2、方案设计3、说明 1、背景 现在很多的web端管理系统会选用vue+element-ui这套技术体系去实现前端界面开发。在使用时间控件的时候的时候，很多用户会希望输入202103100915能够显示成2021-03-10 09:15或2021/03/10 09:15等，总而言之就是输入方便，显示优美。效果如下图所示： 2、方案设计 刚刚听SA给我提这个需求的时候，我的第一反应就是去Element官网看看是否有什么属性支持自定义输入的，还真别说，找到了下面两个属性，于是就迫不及待的拿来试了试
【elementui】关于el-date-picker日期限制输入
weixin_47200160的博客
05-17 927
**小需求：element ui关于el-date-picker在实际开发过程中需要限制日期，比如：开始日期不能比结束日期迟，结束日期-开始日期不能相差超过365天。 话不多少，上代码看看。** <template> <div class="home"> <HelloWorld msg="主页" /> <div> <el-date-picker v-model="startDate" type="date" placeho
el-date-picker中type="datetimerange"的Slots属性该怎么使用
weixin_42584507的博客
02-15 1174
在使用element-ui组件库中的el-date-picker中，当type属性设置为"datetimerange"时，可以使用多个Slots属性来自定义时间范围选择器的内容和样式。 以下是el-date-picker中type为"datetimerange"时可用的Slots属性及其用法： start - 用于自定义开始日期选择器的内容和样式。 end - 用于自定义结束日期选择器的内容和...
vue适用于pc端的城市选择组件按城市首字母排序
08-12
10. **安装与使用**：对于这个名为"vue-city-picker"的组件，用户可能需要通过npm或yarn安装，然后在项目中导入并注册使用。 综上所述，"vue适用于pc端的城市选择组件按城市首字母排序"是一个实用的前端工具，它...
基于react的地址选择器
04-10
8. **单元测试**：为了确保代码的健壮性，地址选择器组件应该有相应的单元测试，测试其不同状态和交互情况。 通过这个React地址选择器项目，开发者可以学习到React组件设计、状态管理和事件处理等核心技能，同时也...
Android仿微信手机登陆选择国家码
09-09
当用户点击国家码选择器时，应弹出一个对话框或下拉菜单，显示完整的国家列表。我们可以使用`AlertDialog`或自定义的`DialogFragment`来实现。同时，搜索功能也很重要，允许用户输入关键字快速找到目标国家。 最后...
日期选择器
一天无聊
12-02 379
日期选择器 参考：https://www.jianshu.com/p/3683a931250e element 提供了开始时间-结束时间的时间选择器，但是有个不太方便的一点就是返回的是一个数组。以下方式是通过两个时间选择器绑定两个控件，实现开始时间早于结束时间，结束时间能晚于开始时间。 组件： <el-table-column :label="td('时间')" prop="remark"> <template slot-scope="scope"> <el-dat
el-data-picker日期组件，搭配dayjs日期库进行日期选择
m0_64785232的博客
01-26 2166
上图显示两个选择框，其中触发日期只可选择日期不可选择时分秒，触发时间不能选择日期只可选择时分秒，且触发时间小于当天日期为显示类型，还可选择year（年份），week（周），month（月）.......，第二个案例讲解的用法指定绑定值的格式函数（看需求如果需要有禁用条件就写，没有的话不用写）禁用条件TruggerDate这个函数是用于判断给定的日期是否已经过了当前时间。函数接受一个Date对象作为参数，使用dayjs库获取当前日期，并与给定的日期进行比较。
elementUI 日期组件 el-date-picker 实现含有 “至今” 按钮
u010212256的博客
05-16 2117
本例是在表格里使用表单，所以有多个日期组件（如果单个组件更简单）。至此，本文内容介绍完毕，如果更好解决方案，欢迎留言。
vue2使用el-date-picker（无输入框版）
最新发布
m0_73321385的博客
05-20 953
这意味着元素在页面上是存在的，但是对用户是不可见的。在这个ui组件中建议不要使用display: none属性会导致日历选择错位。这个属性设置了一个元素的。
el-date-picker自定义选择时间&&el-time-select自定义选择时间实现避免时间冲突
qq_23355915的博客
01-10 4212
element-ui el-data-time 自定义选择时间开始日期不能小于结束日期，两个选择框之间的互相限制
【ElementUI】详细分析DatePicker 日期选择器
码农研究僧的博客
04-01 1万+
实战结合Element官网的心得体会
Vue-element列表el-date-picker实现自定义高亮显示日期
rclack的博客
04-08 4777
一、需要来源 一个需求，需要在列表里面的按钮点击弹窗日期选择，然后disable指定的日期间值。 话不多说，先上效果图 Note：这个在网上找方案的时候，因为这个是有很多的限制存在，并且，点击提交需要选择月份之后进行事件的触发，如果当当以行数据指定的话，无法进行触发，当然解决方案也很简单，就是改变存储值，变成一个数组，然后在查询的时候，保存了对应的数据，然后通过scope.$index进行下标寻值然后高亮显示月份，但点击月份的时候，会自动赋值给数组0，然后取值直接取，然后处理完成数据之后，直接再
Web前端篇——el-date-picker日期弹出框大小的修改
u011391361的博客
01-10 2606
el-date-picker日期弹出框大小的修改
vue el-date-picker封装及使用
weixin_46328739的博客
12-01 1593
使用了 Element UI 中的 el-date-picker 组件，并对其进行了进一步封装和定制。
el-date-picker点击事件
01-24
要使用el-date-picker的点击事件，你可以在组件上绑定一个@click事件监听器。当用户点击日期选择器时，该事件将被触发。 以下是一个示例代码，演示了如何使用el-date-picker的点击事件： ```html <el-date-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好喝的西北风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值