InputXml.vue

<template>
    <el-input
        :id="id"
        ref="form-item"
        v-model="value"
        type="textarea"
        v-bind="$attrs"
        v-on="$listeners"
        v-bind:disabled="isDisable"
        :rows="maxRows"
        resize="none"
        @change="onChange"
    />
</template>

<script>
export default {
    data: function () {
        return {
            value: "",
            isXml: false,
        };
    },
    props: {
        maxRows: {
            type: Number,
            default: 3,
        },
        maxCols: {
            type: Number,
            default: 4,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: undefined,
        },
        model: {
            type: Object,
            default: undefined,
        },
    },
    computed: {
        // model: {
        //     get() {
        //         let value = this.format(this.value);
        //         return value;
        //     },
        //     set(newVal) {
        //         this.$emit("input", newVal);
        //     },
        // },
        mode () {
            return this.$store.state.Status.mode
        },
        isDisable: {
            get() {
                return this.mode === "display" || this.disabled;
            },
        },
    },
    methods: {
        show: function (rows) {
            let strs = rows.length > 0 ? rows[0] : "";
            if (strs.startsWith("<?xml")) {
                this.isXml = true;
                var pattern = /<tdfmt\s[^>]*>(.*)<\/tdfmt>/;
                var temp = pattern.exec(strs);
                if (temp != null) {
                    strs = temp[1];
                }
            }
            return strs.replace(/<br\/>/g, "\n");
        },
        format: function (value) {
            if(this.isXml){
                var len = value.length;
                value = value.replace(/\n/g, "<br/>")
                var head = "<?xml version='1.0'?><tdfmt sel-start='" + len + "'>";
                var tail = "</tdfmt>";
                return head + value + tail;
            }
            return value;
        },
        onChange() {    
            if (this.model && this.model.rows) {
                this.model["rows"][0] = this.format(this.value);
                this.$emit("change", this.value);
            }
        },
    },
    watch: {
        model: function () {
            let rows = this.model["rows"] || [];
            this.value = this.show(rows);
        },
    },
};
</script>

<style>
/* .el-input.highlight .el-input__inner{
  border-color: red;
} */
</style>