![](https://i-blog.csdnimg.cn/direct/9d3a51b529e14690a7049ec9b808fc23.png)
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>