优化工作人员职责展示

src/views/modules/base/organization/organization.vue

@@ -1,43 +1,5 @@
 <template>
     <div class="app-container">
-        <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
-            <el-form-item label="组织名称" prop="deptName">
-                <el-input
-                v-model="queryParams.deptName"
-                placeholder="请输入组织名称"
-                clearable
-                size="small"
-                @keyup.enter.native="handleQuery"
-                />
-            </el-form-item> -->
-            <!-- <el-form-item label="状态" prop="status">
-                <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
-                <el-option
-                    v-for="dict in dictList"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                />
-                </el-select>
-            </el-form-item> -->
-            <!-- <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-            </el-form-item>
-        </el-form> -->
-
-        <!-- <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-                <el-button
-                type="primary"
-                plain
-                icon="el-icon-plus"
-                size="mini"
-                @click="handleAdd"
-                >新增</el-button>
-            </el-col>
-        </el-row> -->
-        
         <el-row>
             <el-col :span="24" style="margin-left: 10px;margin-top: 10px;margin-bottom: 20px;">
                 <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -128,7 +90,11 @@
         style="width: 100%"
         height="250">
             <el-table-column prop="name" label="本级工作人员名字" width="260"></el-table-column>
-            <el-table-column prop="roles" label="本级工作人员职责" width="260"></el-table-column>
+            <el-table-column prop="roles" label="本级工作人员职责" width="260">
+                <template slot-scope="scope">
+                    <el-tag type="primary" size="mini" v-for="(role, index) in scope.row.roles" :key="index" disable-transitions>{{ role }}</el-tag>
+                </template>
+            </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
                 <template slot="header" slot-scope="scope">
                 <el-button size="mini"
@@ -171,7 +137,11 @@
         :data="departmentStaffTableListData"
         style="width: 100%">
             <el-table-column prop="name" label="下级机关单位/基层科室工作人员" width="260"></el-table-column>
-            <el-table-column prop="roles" label="下级机关单位/基层科室工作人员职责" width="260"></el-table-column>
+            <el-table-column prop="roles" label="下级机关单位/基层科室工作人员职责" width="260">
+                <template slot-scope="scope">
+                    <el-tag type="primary" size="mini" v-for="(role, index) in scope.row.roles" :key="index" disable-transitions>{{ role }}</el-tag>
+                </template>
+            </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot="header" slot-scope="scope">
                 <el-button size="mini"
@@ -215,7 +185,11 @@
         style="width: 100%"
         height="250">
             <el-table-column prop="name" label="网格工作人员名字" width="260"></el-table-column>
-            <el-table-column prop="roles" label="网格工作人员职责" width="260"></el-table-column>
+            <el-table-column prop="roles" label="网格工作人员职责" width="260">
+                <template slot-scope="scope">
+                    <el-tag type="primary" size="mini" v-for="(role, index) in scope.row.roles" :key="index" disable-transitions>{{ role }}</el-tag>
+                </template>
+            </el-table-column>
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                 <template slot="header" slot-scope="scope">
                 <el-button size="mini"
@@ -1698,4 +1672,7 @@ export default {
         width: 100%;
         height: 100%;
     }
+    .el-tag + .el-tag {
+        margin-left: 10px;
+    }
 </style>