Vue.extend() 创建一个组件构造器

即上一篇 我们接下来看实际代码中；

1.封装 input 和select，component.js文件

import Vue from 'vue';
import definedInput from './c-input.vue';
import definedSelect from './c-select.vue';

const cInput = Vue.extend(definedInput);
const cSelect = Vue.extend(definedSelect);

export default {
    cInput,
    cSelect
}

2.在文件中引入这个

import extendComponents from "./component.js";

  <u-table-column

                        v-for="(item, colIndex) in columns"

                        :key="item.prop"

                        :prop="item.prop"

                        :label="item.label"

                        fixed="left"    

                        :width="item.width">

                        <template v-slot="{row, $index}">

                            <div :ref="`td_input_${$index}_${colIndex}`" tabindex="0" :class="['readonly', `td_input_${$index}_${colIndex}`]" @click="inputClick(row, item.prop, $event)">{{row[item.prop]}}</div>

                        </template>

                    </u-table-column>

 inputClick(row, key, event, item) { // input输入框
        let target = event.target || event;
        let colIndex = this.columnKeys.indexOf(key);
        this.updateTime();
        this.preCheck(key);
        if(this.checkPreError()){
            return;
        }
        let isReadOnly = target.className.includes('readonly');
        let component = new extendComponents.cusInput({
            propsData: {
                id: new Date().getTime(), // 唯一id
                oldCellValue: row[key], // 传递单元格的原值
                cellValue: row[key], // 传递单元格输入的值
                cellDom: target, // 传递这个dom元素
                row: row, // 传递的行数据
                property: key, // 传递的字段属性
                colItem: item,
                colIndex: colIndex,
                saveData: this.saveData, // 传递回调函数用于保存行数据，组件中可以触发
                moveKeyUp: this.moveKeyUp, // 
                isReadOnly: isReadOnly,
                colTotal: this.columnKeys.length,
                rowTotal: this.data.length
            },
        }).$mount(); 
        target.after(component.$el);
    },