el-table 对动态列表 中的某一列 指定宽度 内容解密 去除标签

javascript 复制代码
<el-table :fit="true" :data="tableData" style="width:calc(100vw)" @selection-change="handleSelectionChange" v-loading="loading" table-layout="auto">
      <el-table-column type="selection" width="20" />
      <el-table-column sortable label="Id" width="100"  prop="workitemId" align="center">            </el-table-column>

<el-table-column
        sortable
        v-for="item in showTableColumn"
        :key="item.prop"
        :fixed="item.fixed"
        align="left"
        :prop="item.prop"
        :min-width="item.minWidth"
        :width="computedWidth(item)"
        :show-overflow-tooltip="item.tooltip"
        :resizable="item.resizable"
        :label="item.label"
      >
      <template #default="{row}">
        <!-- link -->
        <template v-if="item.prop === 'title'">
           <el-link  type="primary" :underline="false" @click="showDetail(row)"> {{row.title }} </el-link>
        </template>
        <template v-if="item.prop === 'description'">
          <span v-if="row.description">{{(formattedUsers(row.description))}}</span>
         <!-- <span v-if="row.description" v-html="formattedUsers(row.description)"></span>
         <span v-else>暂无描述</span> -->
        </template>
      </template>
      </el-table-column>
      <!-- <el-table-column prop="action" label="操作" width="100">
      <template #default="scope">
          <el-button
            size="small"
            type="primary"
            link
            icon="Edit"
            @click="edit(scope.row)"
            >编辑</el-button
          >
     </template>
     </el-table-column> -->
    </el-table>


<script setup>

// 处理宽度
const computedWidth = computed(()=>{ 
  return function computedWidth(item) {
    // console.log(item);
    if (item.type === 'title') {
      return 370
    } else if (item.label === '描述') {
      return 276
    } else { 
      return 100
    }
  }
})

//解密AES并且去除相关img table等标签,保留纯文本
const formattedUsers = (val) => {
  return asc.decrypt(val).replace(/<[^>]+>/g, '');
}

</script>
相关推荐
雪芽蓝域zzs7 小时前
第 2 节:基础扩展 - 下拉弹窗常用原生属性
vue.js·elementui
星栈10 小时前
pnpm 12 升级实测
前端·javascript
Ai-_Man11 小时前
您您这可以把Microsofat Copilot的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑·copilot
Bruce_Liuxiaowei14 小时前
网页版 DeepSeek “harness desktop“ WebGL 上下文创建失败排查实录
开发语言·javascript·webgl
小凯在掘金15 小时前
为什么箭头函数不能作为构造函数?
前端·javascript
可乐鸡翅yeah_15 小时前
网页端 M3U8 播放器性能监控,怎么看播放卡顿指标
javascript·ffmpeg·音视频·safari·m3u8
可乐鸡翅yeah_15 小时前
M3U8 防盗链 URL‑Token 签名,新手开发实操避坑
开发语言·javascript·ios·音视频·safari
2603_9658966215 小时前
JS原型与原型链|对象继承与实例底层原理
开发语言·javascript·原型模式
JustHappy16 小时前
「vConsole MCP🛠️」我让 AI 直接看见任何 H5 的日志和请求帮你 debug
前端·javascript·程序员
xieter17 小时前
【技术精选】Node.js 核心事件循环机制与异步 I/O 深度剖析 (2026-10-02)
前端·javascript