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);