Vue-jsx Component Development Notes

Use JSX to develop elementUI editable table building development

• Change v-mode to vModel event attribute refer to babel-plugin-transform-vue-jsx
• Directives ={{name: “number”, value: row, ARG: prop}} VUE-JSX API
• Slot injection scopedSlots returns entity VNode or text {default:(scope)=>scope} refer to vue-jsx API

The scope object is passed as a reference type and can be edited directly with this.$forceUpdate(); Penalize VNode updates.

/ * * *@name Editable table *@template <ConditionTable :data="demoData" :column="demoColumn"   />
 * @param {json} Let demoData = [{title1: "1", title2: "2", title3: "3", title4: "4", title5: "5",edit:"0"}]; *@param {json} Column header example * let demoColumn = [{prop: "title1", label: "title1", align: "center", width: "Auto ",slot:"input"}, {prop: "title5", label: "title5", align: "center", width: "auto",slot:"select",select:[{label:"Sliding Scale",value:"1"},{label:"Fix Comm",value:"2"}] }, { prop: Align :" center", width: "300",slot:"button+"}]; *@param {slot} Slot Processable type INPUT Input box SELECT Drop-down menu Data corresponding to the SELECT attribute needs to be set. Button: no button is added. Button + : a button is added

export default {
    name: "ConditionTable".props: {
        data: {
            type: Array.default: () = > [] / / data
        },
        column: {
            type: Array.default: () = >[]}},data() {
        return {};
    },
    mounted() {
        console.log(this.column);
    },
    methods: {
        // TODO:Create a header
        createColumn(data) {
            // console.log(this.column)
            let button = (row, $index, { prop }) = > {
                return (
                    <div class="inlineBlock">{row["edit"] === "0" || ! row["edit"] ? (<el-button type="primary" class="ml10" size="mini" onClick={()= >This. EventEdit ($index, row, data)}> modify</el-button>
                        ) : (
                            <el-button type="warning" class="ml10" size="mini" onClick={()= >This.eventconfirm ($index, row, data)}> Confirm</el-button>
                        )}
                        <el-button type="danger" class="ml10" size="mini" onClick={()= >This. eventDelete($index, row, data, "service")}> Delete</el-button>
                    </div>
                );
            };
            // TODO:Button class
            let buttonPluse = (row, $index, { prop }) = > {
                return (
                    <div>
                        <el-button type="primary" size="mini" onClick={()= >This.eventadd ($index, row, data)}> Add</el-button>
                        {button(row, $index, { prop })}
                    </div>
                );
            };
            // TODO:The input class
            let input = (row, $index, { prop }) = > {
                let directives = { name: "number".value: row, arg: prop };
                if (row["edit"= = ="1") {
                    return <el-input vModel={row[prop]} directives={directives} class="edit-input" size="small" />;
                } else {
                    return <span>{row[prop]}</span>; }};// TODO:Select the class
            let select = (row, $index, { prop,select }) = > {
                let text = () = >{
                    let da = select.filter(item= >{ return item.value==row[prop]});
                    
                    if(da.length){ return da[0].label}else{ return row[prop]
                    }
                }
                if (row["edit"= = ="1") {
                    return (
                        <el-select vModel={row[prop]} class="edit-input" size="small">
                            {select.map((item, ind) => {
                                return <el-option key={ind} label={item.label} value={item.value} />;
                            })}
                        </el-select>
                    );
                } else {
                    return <span>{text()}</span>; }};// TODO: 列
            let col = this.column.map((item = { prop: "", label: "--", align: "center", slot: "" }, ind) = > {
                let scopedSlots = {
                    default: ({ row, $index }) = > {
                        switch (item["slot"]) {
                            case "button+":
                                return buttonPluse(row, $index, item); // Note: There are new ones
                            case "button":
                                return button(row, $index, item); // Note: No new note is added
                            case "input":
                                return input(row, $index, item); 
                            case "select":
                                return select(row, $index, item); 
                            default:
                                returnrow[item.prop]; }}};if (item["slot"]) {
                    return (
                        <el-table-column
                            prop={item.prop}
                            label={item.label}
                            align="center"
                            key={ind}
                            width={item["width"] || "auto"}
                            scopedSlots={scopedSlots}
                        />
                    );
                } else {
                    return <el-table-column prop={item.prop} label={item.label} align="center" key={ind} width={item["width"] || "auto} "/ >; }});return col;
        },
        // TODO: increment
        eventAdd(index, row, data) {
            letcloneData = { ... row };for (let item in cloneData) {
                cloneData[item] = item=="edit"? "1":"";
            }
            data.splice(index + 1.0, cloneData);
            this.$forceUpdate();
            this.$emit("add",data);
        },
        // TODO:Modify the
        eventEdit(index,row, data) {
           row.edit="1";
           this.$forceUpdate();
        },
        // TODO:confirm
        eventConfirm(index,row, data) {
            row.edit="0";
            this.$forceUpdate();
            this.$emit("confirm",data);
        },
        // TODO:delete
        eventDelete(index,row, data, name) {
            if (data.length <= 1) {
                this.$message({
                    type: "warning".message: "The last piece of data, please click Edit!"
                });
                return;
            }
            this.$confirm(Are you sure you want to delete this record?."Tip", {
                confirmButtonText: "Sure".cancelButtonText: "Cancel".type: "warning"
            }).then(() = > {
                data.splice(index, 1);
                this.$forceUpdate();
                this.$emit("delete", data); }); }},render() {
        let { data } = this;
        return (
            <article class="condition-table">
                <el-table data={data} fit border empty-text="No data at present" style="width: 100%">
                    {this.createColumn(data)}
                </el-table>
            </article>); }};Copy the code