权限管理-身份管理-更换过长权限名称展示问题

src/views/setting/systemRole/index.vue

@@ -23,11 +23,27 @@
           label="身份名称"
           min-width="150"
         />
-        <el-table-column
-          prop="rule_name"
-          label="权限名称"
-          min-width="250"
-        />
+<!--        <el-table-column-->
+<!--          prop="rule_name"-->
+<!--          label="权限名称"-->
+<!--          min-width="250"-->
+<!--        />-->
+        <el-table-column prop="rule_name" label="权限名称" min-width="250">
+        <template v-slot="{ row }">
+          <div v-if="row.isExpanded">
+            {{ row.rule_name }}
+            <el-button
+                type="text"
+                size="small"
+                @click="row.isExpanded = false"
+            >收起</el-button>
+          </div>
+          <div v-else>
+            {{ getTruncatedText(row.rule_name, 40) }}
+            <el-button type="text" size="small"  @click="row.isExpanded = true" v-if="row.rule_name && row.rule_name.length > 40" >展开</el-button>
+          </div>
+        </template>
+        </el-table-column>
         <el-table-column
           prop="status"
           label="是否显示"
@@ -107,19 +123,26 @@ export default {
     this.getList()
   },
   methods: {
+    // 新增的文本截断方法
+    getTruncatedText(text, limit = 40) { // 默认截断长度可调整
+      if (!text) return '';
+      if (text.length <= limit) {
+        return text;
+      }
+      return text.slice(0, limit) + '...';
+    },
+
     // 列表
     getList() {
       this.listLoading = true
       menuRoleApi(this.tableFrom).then(res => {
         this.tableData.data = res.data.list.map(item => {
-          // 判断 rule_name 是否超过 20 个字符
-          if (item.rule_name && item.rule_name.length > 20) {
-            // 超过 20 个字符，则截取前 20 个字符并加上省略号
-            item.rule_name = item.rule_name.slice(0, 20) + '...';
-          }
+          // 为每项数据添加一个控制展开/收起状态的属性
+          item.isExpanded = false;
+          // 确保 rule_name 是字符串
+          item.rule_name = item.rule_name || '';
           return item;
         });
-
         this.tableData.total = res.data.count
         this.listLoading = false
       }).catch(res => {