首页 > 其他分享 >组件

组件

时间:2023-05-31 10:26:14浏览次数:25  
标签:false editMode default 组件 input type String

动态编辑表格(支持自定义编辑组件)

<template>
  <div
    class="edit-cell"
    @click="onFieldClick"
  >
    <el-tooltip
      v-if="!editMode && !showInput"
      :placement="toolTipPlacement"
      :open-delay="toolTipDelay"
    >
      <div
        tabindex="0"
        @keyup.enter="onFieldClick"
      >
        <slot name="content" />
      </div>
    </el-tooltip>
    <component
      :is="editableComponent"
      v-if="editMode || showInput"
      ref="input"
      v-bind="$attrs"
      v-model="model"
      @focus="onFieldClick"
      @keyup.enter.native="onInputExit"
      v-on="listeners"
    >
      <slot name="edit-component-slot" />
    </component>
  </div>
</template>
<script>
export default {
	name: "EditableCell",
	inheritAttrs: false,
	props: {
		value: {
			type: String,
			default: ""
		},
		// toolTipContent: {
		// 	type: String,
		// 	default: this.value
		// },
		toolTipDelay: {
			type: Number,
			default: 5000000
		},
		toolTipPlacement: {
			type: String,
			default: "top-start"
		},
		showInput: {
			type: Boolean,
			default: false
		},
		editableComponent: {
			type: String,
			default: "el-input"
		},
		closeEvent: {
			type: String,
			default: "blur"
		}
	},
	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() {
			this.editMode = true;
			this.$nextTick(() => {
				let inputRef = this.$refs.input;
				if (inputRef) {
					inputRef.focus();
				}
			});
		},
		onInputExit() {
			this.editMode = false;
		},
		onInputChange(val) {
			this.$emit("input", val);
		}
	}
};
</script>
<style>

</style>
  • 在表格中使用时把渲染的内容放在content插槽中

          <Editable-cell
            v-model="row.companyLevel"
            slot-scope="{ row }"
            :show-input="row.editMode"
            editable-component="el-select"
            close-event="change"
          ></Editable-cell>
// 用插槽来把数据给到组件,使用的时候要记得给table绑定的数据加上是否显示编辑组件的值editMode,涉及到数据的保存修改时要把这个editMode删除掉,避免发起请求时作为不必要的字段传给接口
  • 可以用map的方法把editMode添加到绑定数据中
mounted: async function () {
		await this.getCompanyTable();
		this.tableData = this.tableData.map(row => {
			return {
				...row,
				editMode: false
			};
		});
	},

标签:false,editMode,default,组件,input,type,String
From: https://www.cnblogs.com/domxia/p/17445291.html

相关文章

  • 【.NET源码解读】Configuration组件及自动更新
    Configuration组件是.NET中一个核心的、非常重要的组件。它提供了一种方便的机制,用于从配置文件、环境变量、命令行参数等各种数据源中读取和配置应用程序,以满足不同环境下应用程序的需求。在本篇文章中,将会介绍Configuration的基本用法,并通过源码探究.NET中Configuration的实现......
  • 【Unity】记录一下:自定义组件的InspectorGUI面板,修改数据不保存问题
    使用target修改之后需要使用EditorUtility.SetDirty设置为脏,但是要注意的是应该设置target所指代的组件,而非是对.gameObject设置为脏,这是没有用的。[CustomEditor(typeof(MerryGoRound))]publicclassMerryGoRoundEditor:Editor{publicoverridevoidOnInspectorGUI(......
  • 【夜莺监控】管理Kubernetes组件指标
    !!大家好,我是乔克,一个爱折腾的运维工程,一个睡觉都被自己丑醒的云原生爱好者。作者:乔克公众号:运维开发故事博客:www.jokerbai.com开始之前Kubernetes是一个简单且复杂的系统,简单之处在于其整体架构比较简单清晰,是一个标准的Master-Slave模式,如下:但是,它又是一个复杂的系统,不论是M......
  • vant组件Popup 弹出层单独设置 van-overlay和van-popup样式
    <van-popupv-model="showInfoBox"position="top"class="top_">默认情况下会自带灰色蒙版如果一个页面的布局需要调用很多个弹框的话有的弹框不想要这个蒙版背景就需要通过这样设置相当于全局设置了.van-overlay{background-color:transparent;width......
  • 九大组件初始化
    1上图2九大组件是在DispatcherServlet的onRefresh方法中初始化的3根据断点可以看出Tomcat启动会触发HttpServletBean的init方法,后续会进行容器的刷新触发refresh方法,容器刷新之后会发布事件4FrameworkServlet实现了监听器 5监听会触发开始的onRefresh方法 6总结......
  • vue组件中修改组件外元素样式
    在实际开发中,由于项目一开始设计的一些不合理性,会在组件中通过html[media=pad]{.xxx{/*组件样式*/}}以上方式修改某些组件的样式,这样会涉及到从html层级选择,由于我style标签是这样写的<stylelang="less"scoped></style>所以导致组件内部无法......
  • 界面组件Telerik UI for WPF可轻松实现直方图,让数据可视化更简单
    TelerikUIforWPF拥有超过100个控件来创建美观、高性能的桌面应用程序,同时还能快速构建企业级办公WPF应用程序。UIforWPF支持MVVM、触摸等,创建的应用程序可靠且结构良好,非常容易维护,其直观的API将无缝地集成VisualStudio工具箱中。TelerikUIforWPF|下载试用TelerikUI......
  • Qt编写视频监控系统77-Onvif组件支持非正常时间的设备
    一、前言在经历了大量的现场设备测试,至少几十种厂家、几百种设备,遇见过奇奇怪怪的问题,一个个想方设法解决,发现有个问题是在下发鉴权的时候,需要带上设备的时间,而不是发送端的时间,如果带的不是设备上的时间很可能鉴权失败。这个问题亲测十几种市面上各种视频监控系统客户端,均未实现......
  • 物体组件
    物体组件1.组件的基本操作代码类名后面跟的MonoBehaviour使脚本能够挂到物体的组件中。组件在Inspector视图中,可以通过最下面的AddComponent添加组件,通过组件点击组件名左边的勾选符号打开或关闭组件,通过组件名右边的三个点下面的RemoveComponent移除组件。2.通过脚本操作组......
  • vue-封装组件-超出部分限制...,并且提示
    显示效果 代码:<template><divclass="tip"><el-tooltip:content="content"placement="top"width="400":disabled="!isShowTooltip"><spanclass="me......