一段文字里将固定文字进行修改

例如: 只可以修改xxx的地方,并以三个x为一组进行修改

xxx蓄滞洪区xxx,xxx水位达到xxx,触发xxx，请做好相关防范。

 只需要关注getDictDataByDictType()这个方法里面的东西

<template>
  <el-dialog
    class="wr-dialog"
    title="消息模板选择"
    v-model="dialog.show"
    :close-on-click-modal="false"
    width="50%"
    @open="open"
  >
    <el-form ref="queryParams" :model="queryParams" inline>
      <el-form-item label="类别">
        <el-cascader
          v-model="queryParams.floodRes"
          clearable
          :options="list"
          @change="changeCascader"
          :props="{
            value: 'dictValue',
            label: 'dictLabel',
            emitPath: false,
            checkStrictly: false,
          }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-button type="primary" @click="getDatalist">查询</el-button>
        <!-- <el-button type="primary" plain @click="add">新增</el-button> -->
      </el-form-item>
    </el-form>
    <!-- <table-page
      ref="tablePage"
      :url="tableUrl"
      :columns="columns"
      :query-params="queryParams"
      :checkBox="false"
      :pageIngType="false"
      height="1.7rem"
    >
      <template #action="{ row }">
        <el-button type="primary" link @click="edit(row)">编辑</el-button>
        <el-button type="danger" link @click="deleteData(row)">删除</el-button>
      </template>
    </table-page> -->
    <el-table :data="tableData" style="width: 100%" stripe height="1.7rem">
      <el-table-column label="" width="50" align="center">
        <template #default="scope">
          <el-radio v-model="currentFactor" :label="scope.row" @input="radioChange(scope.row)">{{""}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" align="center" width="100">
      </el-table-column>
      <el-table-column prop="dictLabel" label="类别" width="200" align="center">
      </el-table-column>
      <el-table-column
        type="String"
        prop="dictLabelInfo"
        label="模板内容"
        align="center"
      >
        <template #default="scope">
          <div v-html="scope.row.dictLabelInfo"></div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="30%"
      v-if="innerVisible"
      :title="innerTitle"
      v-model="innerVisible"
      :before-close="closeInnerDialog"
      append-to-body
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="类别：" prop="region">
          <el-select v-model="form.warnTypeName" placeholder="请选择类别">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板内容：" prop="warnInfo">
          <el-input
            type="textarea"
            v-model="form.warnInfo"
            :rows="5"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeInnerDialog">取消</el-button>
        <el-button @click="save" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 自定义按钮组 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button @click="saveDialog" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import TablePage from "@/components/table-page/index.vue";
import SelectList from "@/components/dict/SelectList/index.vue";
import { getDictDataByDictType } from "@/api/common";
export default {
  name: "TableDialog",
  components: {
    TablePage,
    SelectList,
  },
  props: {
    dialog: Object,
  },
  mixin: {},
  data: function () {
    return {
      currentFactor:'',
      editableIndexes: [],
      tableData: [],
      dictValue: "",
      list: [],
      tableUrl: "warnInfo/page",
      queryParams: {},
      columns: [
        { type: "selection", align: "center" },
        { label: "序号", type: "index", width: "46px" },
        { label: "类别", prop: "warnTypeName" },
        { label: "模板内容", prop: "warnInfo" },
        { label: "操作", slot: "action" },
      ],
      innerVisible: false,
      innerTitle: "",
      form: {},
      rules: {
        warnTypeName: [
          { required: true, message: "请选择类别", trigger: "change" },
        ],
        warnInfo: [
          { required: true, message: "请输入模板内容", trigger: "blur" },
        ],
      },
      dictType: "SmsType",
      radioRow:{}
    };
  },
  watch: {},
  mounted() {
    const params = {
      dictType: this.dictType,
    };
    // 字典列表
    getDictDataByDictType(params).then(
      (res) => {
        const { data } = res;
        this.list = [...data];
      },
      (err) => {
        console.dir(err);
      }
    );
    this.getDatalist();
  },
  methods: {
    getDictDataByDictType() {
      const params = {
        dictType: this.dictType,
        dictValue: this.dictValue ? this.dictValue : null,
      };
      // 字典列表
      getDictDataByDictType(params).then(
        (res) => {
          const { data } = res;
          data.forEach((item) => {
            item.dictLabelInfo = "";
            item.dictLabelInfos = "";
            if (item.children && item.children.length > 0) {
              item.children.forEach((items, indexs) => {
                item.dictLabelInfo += items.dictLabel + '<br>'
                item.dictLabelInfos += items.dictLabel
                // const dictLabel = items.dictLabel;
                // const replacedText = dictLabel.replace(/(x+)/g, (match, p1) => {
                //   if (p1.length === 3) {
                //     return `<input style="background: transparent;border: none;font-family: auto;font-style: normal;font-size: 14px;width: auto;min-width: 100px;"  value="${p1}"></input>`;
                //   }
                // });
                // item.dictLabelInfo += `<div style="text-align: left;text-indent: 2em;">${replacedText}</div>`;
              });
            }
          });
          this.tableData = data;
          console.log(this.tableData, "this.tableData");
        },
        (err) => {
          console.dir(err);
        }
      );
    },
    // 表格单选框
    radioChange(row){
      this.radioRow = row
    },
    changeCascader(value) {
      this.list.forEach((item) => {
        if (item.children && item.children.length > 0) {
          item.children.forEach((items) => {
            if (items.dictValue === value) {
              this.dictValue = item.dictValue;
            }
          });
        }
      });
    },
    // 查询
    getDatalist() {
      if (!this.queryParams.floodRes) {
        this.dictValue = null;
      }
      this.currentFactor = ''
      this.getDictDataByDictType(this.dictValue);
    },
    // 关闭弹窗
    closeDialog() {
      this.currentFactor = ''
      this.$parent.tdialog.show = false;
    },
    saveDialog(){
      this.closeDialog()
      this.$emit('getRadioRow',this.radioRow)
    },
    open() {},
    // 新增
    add() {
      this.innerTitle = "新增";
      this.innerVisible = true;
    },
    // 编辑
    edit(row) {
      this.innerTitle = "编辑";
      this.form = { ...row };
      this.innerVisible = true;
    },
    closeInnerDialog() {
      this.form = {};
      this.$refs.form.resetFields();
      this.innerVisible = false;
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.getDatalist();
        }
      });
    },
    // 删除
    deleteData(row) {
      ElMessageBox.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getDatalist();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.dialog-footer {
  margin-top: 10px;
  text-align: center;
}
</style>

只需要关注 getRadioRow()这个方法里面的东西

<template>
  <div class="content">
      <BreadCrumb/>     
      <div class="con-box">
        <el-row :gutter="30">
          <el-col :span="5">
            <legend-title title="部门列表" />
            <!-- <div class="table-title">部门列表</div> -->
            <el-form class="queryParams" :model="queryParams" inline>
              <el-form-item>
                <el-input v-model="queryParams.name" clearable placeholder="请输入"/>
              </el-form-item>
              <el-form-item label-width="0px">
                <el-button type="primary">查询</el-button>
              </el-form-item>
            </el-form>

          <el-tree class="left-dept"
            :data="deptTree" 
            :props="defaultProps" 
            @node-click="deptNodeClick"
          ></el-tree>

          </el-col>
          <el-col :span="19">
            <div class="right-top">
              <div class="table-title">信息发布</div>
              <el-button type="primary" @click.native="addPerson">未找到联系人信息？创建临时联系人</el-button>
              <TableTransfer :table1="table1" :table2="table2"/>
            </div>
            <div class="right-bottom">
              <div class="table-title">
                请输入内容
                <el-button type="primary" @click.native="showTemplate">模板选择</el-button>
              </div>
              <div class="message" >
                <p v-html="messageInfo"></p>
                <!-- <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="content">
                </el-input> -->
              </div>
              <div class="btn">
                <el-button @click="reset">重置</el-button>
                <el-button type="primary" @click="sendMsg" :loading="isSending">发送</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 新增 临时联系人 -->
      <PersonDialog :dialog="pdialog" @addTemPerson="addTemPerson"></PersonDialog>

      <!-- 模板选择 -->
      <TemplateDialog :dialog="tdialog" @getRadioRow="getRadioRow"></TemplateDialog>
  </div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb/index.vue";
import TableTransfer from "./table-tranfer.vue";
import { getDepts } from "@/api/common";
import { listPersonByDeptId } from "@/api/floodsDroughts/warnManage/person.js"
import { sendMsg } from "@/api/floodsDroughts/warnManage/message.js"

import PersonDialog from "./person-dialog.vue"
import TemplateDialog from "./tem-dialog.vue"
export default {
  name: "Message",
  components: {
    BreadCrumb,TableTransfer,
    PersonDialog,TemplateDialog
  },
  props: {},
  mixin: {},
  data() {
    return {
      messageInfo:'', // 模板内容
      messageValue:'',
      activeDeptId:"",
      content:'',
      queryParams:{
        name:""
      },
      deptTree:[],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
      },
      pdialog:{
        id: 'num',
        show: false,
        form: {},
      },
      tdialog:{
        id: 'num',
        show: false,
        form: {},
      },
      table2:[],
      table1:[],
      isSending:false

    };
  },
  computed: {},
  watch: {

  },
  created() {},
  mounted() {
    this.getDeptTree()
    
  },
  methods: {
    getRadioRow(row){
      this.content = row
      let child = row.children
      if(child && child.length > 0) {
        let replacedText = '';
        child.forEach((item, index) => {
          let label = item.dictLabel;
          const regex = /x{3}/g;
          let groupCount = 0;
          let replacedLabel = label.replace(regex, (match,group1) => {
            groupCount++;
            const width = this.getTextWidth(match)
            const content = `<input type="textarea" style="width:${width}px;background: transparent;border:none;outline: none;" value="${match}"/>`
            return content
          });
          if (groupCount > 0) {
            replacedText += `<p style="height: 30px;line-height: 30px;">${replacedLabel}</p>`;
          }
        });
        this.$nextTick(()=>{
          // 获取循环生成的输入框元素
          const inputElements = document.querySelectorAll('input[type="textarea"]');
          // 为每个输入框元素添加事件监听器
          inputElements.forEach((inputElement) => {
            inputElement.addEventListener('input', (event) => {
              const maxLength = 20; // 最大字符数限制（汉字算2个字符）
              const input = event.target;
              const inputValue = input.value;
              let totalLength = 0;
              let truncatedValue = '';
              for (let character of inputValue) {
                const charCode = character.charCodeAt(0);
                // 根据字符编码判断字符是否为汉字，汉字占两个字符宽度
                if (charCode >= 0 && charCode <= 128) {
                  totalLength += 1; // 英文字符占一个字符宽度
                } else {
                  totalLength += 2; // 汉字字符占两个字符宽度
                }
                // 如果字符长度未超过限制，则将该字符添加到结果字符串中
                if (totalLength <= maxLength) {
                  truncatedValue += character;
                }
              }
              input.value = truncatedValue;
              // 在这里执行你想要的事件处理逻辑
              const width = this.getTextWidth(event.target.value)
              event.target.style.width = Math.floor(width) + 'px'
            });
            inputElement.addEventListener('change',(event)=>{
              let inputValue = event.target.value
               // 如果输入框的值非空，则将其拼接到变量中
              if (inputValue.trim() !== '') {
                if (this.messageValue !== '') {
                  this.messageValue += ','; // 在非空值之前添加逗号(',')
                }
                this.messageValue += inputValue;
              }
            })
          });
        })
        this.messageInfo = replacedText
      }
    },
    getTextWidth(text, font = '14px Arial') {
      // 创建一个隐藏的 Canvas 元素
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      context.font = font;

      // 测量文本的宽度
      const metrics = context.measureText(text);
      return metrics.width;
    },
    reset(){
      this.messageInfo = ''
    },
    treeCheck(node,list){
     //node 该节点所对应的对象、list 树目前的选中状态对象
     //选中事件在选中后执行，当lis中有两个选中时，使用setCheckedKeys方法，选中一个节点
      if (list.checkedKeys.length == 2) {
        //单选实现
        this.$refs.treeForm.setCheckedKeys([node.PHY_ID]);
      }
    },
    addTemPerson(form){
      this.table2.push(form)
    },
    // 发送成功后清空
    msgInint(){
      this.table2=[]
      this.table1=[]
      this.content=''
      this.messageInfo=''
      this.messageValue = ''
    },
    // 发送
    sendMsg(){
      this.isSending=true
      let list=[]
      this.table2.forEach(item => {
        list.push(
          {deptId: item.deptId,
          name: item.name,
          phone: item.phone})
      });
      let data={
        content:this.content.dictLabelInfos,
        fdSmgDetailBCreateInputDTOList:list,
        sendType: "1",
        dictValue:this.content.dictValue,
        message:this.messageValue
      }
      sendMsg(data).then(res=>{
        // console.log("发送短信了",res)
        this.isSending=false
        if(res.code==1){
          ElMessage.success({
              message: '发送成功'
            });
            this.msgInint()
        }else{
          ElMessage.error({
              message: '发送失败'
            });
        }
      })
    },
    // 添加联系人
    addPerson(){
      this.pdialog.show=true
    },
    // 选择模板
    showTemplate(){
      this.tdialog.show=true
    },
    // 获取左侧部门树信息
    getDeptTree(){
      getDepts().then(
        (res) => {
          const { data } = res;
          this.deptTree = [...data];
        },
        (err) => {
          console.dir(err);
        }
      );
    },
    // 点击左侧部门树
    deptNodeClick(data){
      // 如果点击的就是当前选中的部门，防止左侧table数据重复
      if(data.id==this.activeDeptId){
        return
      }
      this.activeDeptId=data.id
      let params={
        deptId:data.id
      }
      listPersonByDeptId(params).then(res=>{
          this.table1=res.data
      })
    },
   
  },
};
</script>
<style lang="scss" scoped>
.content{
  position: relative;
  width: 100%;
  height: 100%;
  padding:20px;
  overflow: hidden;
  background-color: #F5F7F8;
  box-sizing: border-box;
  .con-box{
    margin:10px 0;
    height:90%;
    padding:20px;
    background-color: #F9FCFF;
    .queryParams{
      margin-top:15px;
      .ep-form-item{
        margin-right: 14px;
      }
    }
    .left-dept{
      height:680px;
      overflow:auto;
    }
  }
  .right-top{
    height:60%;
    position: relative;
    button{
      position: absolute;
      right:10px;
      top:-9px;
    }
  }
  .message{
    margin-top:15px;
    border: 1px solid #dcdfe6;
    min-height: 146px;
    border-radius: 3px;
  }
  .btn{
    text-align: center;
    margin-top:15px;
  }
  .table-title{
    border-left: 6px solid #3585FF;
    padding-left:10px;
    margin-bottom:15px;
    font-size: 16px;
    position: relative;
    button{
      position: absolute;
      margin-left:30px;
      bottom:-5px;
    }
  }
}
.is-checked{
  background:#333 !important;
}
</style>

结果展示:

1)选择表格数据

 

2)在框中展示数据,内嵌input标签进行修改,修改前为xxx