vue element-ui 可编辑表格
2021/6/9 10:25:35
本文主要是介绍vue element-ui 可编辑表格,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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 element-ui 可编辑表格的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist