修改table组件换行

src/pages/main/performance/analysis.vue

@@ -2,7 +2,7 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-12-03 15:18:11
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-03 19:57:11
+ * @LastEditTime : 2021-12-04 18:23:59
  * @FilePath     : \spfm-market-front\src\pages\main\performance\analysis.vue
 -->
 <template>
@@ -37,6 +37,36 @@ export default {
                     score: "1",
                     leader: "邱钰",
                 },
+                {
+                    index: 2,
+                    subject: "政企能力攻坚工程",
+                    origin: "八大工程",
+                    content:
+                        "1、推进项目支撑能力升级，优化智慧中台运营能\n2、推进风险防控质量升级，打造风险防控体系\n3、推进集团价值能力提升，打造业务运营监控体系\n",
+                    mark: "1、推进项目支撑能力升级：\n1.1、4月完成资金管理、响应交付功能上线；\n1.2、6月完成政企沙盘、行业库、标杆项目库功能上线；\n1.3、12月完成商机管理、角色管理、欠费管理、ESOP迁移、六项重点产品甩单支撑能力建设、ICT项目支撑能力升级。",
+                    score: "1",
+                    leader: "邱钰",
+                },
+                {
+                    index: 3,
+                    subject: "政企能力攻坚工程",
+                    origin: "八大工程",
+                    content:
+                        "1、推进项目支撑能力升级，优化智慧中台运营能\n2、推进风险防控质量升级，打造风险防控体系\n3、推进集团价值能力提升，打造业务运营监控体系\n",
+                    mark: "1、推进项目支撑能力升级：\n1.1、4月完成资金管理、响应交付功能上线；\n1.2、6月完成政企沙盘、行业库、标杆项目库功能上线；\n1.3、12月完成商机管理、角色管理、欠费管理、ESOP迁移、六项重点产品甩单支撑能力建设、ICT项目支撑能力升级。",
+                    score: "1",
+                    leader: "邱钰",
+                },
+                {
+                    index: 4,
+                    subject: "政企能力攻坚工程",
+                    origin: "八大工程",
+                    content:
+                        "1、推进项目支撑能力升级，优化智慧中台运营能\n2、推进风险防控质量升级，打造风险防控体系\n3、推进集团价值能力提升，打造业务运营监控体系\n",
+                    mark: "1、推进项目支撑能力升级：\n1.1、4月完成资金管理、响应交付功能上线；\n1.2、6月完成政企沙盘、行业库、标杆项目库功能上线；\n1.3、12月完成商机管理、角色管理、欠费管理、ESOP迁移、六项重点产品甩单支撑能力建设、ICT项目支撑能力升级。",
+                    score: "1",
+                    leader: "邱钰",
+                }
             ],
             table_loading: false,
             table_config: [

src/pages/main/performance/components/table.vue

@@ -2,46 +2,20 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-11-01 18:02:58
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-04 16:08:24
+ * @LastEditTime : 2021-12-04 18:28:33
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\table.vue
 -->
 <template>
-  <el-table class="simple-table" :data="computed_list" v-loading="loading">
-    <el-table-column
-      v-for="({ props, label, type, width, align, children }, index) in config"
-      :key="index"
-      :prop="props"
-      :width="width"
-      :label="label"
-      :align="align || 'center'"
-    >
-      <template #default="scope">
-        <div v-if="type === 'edit'">
-          <el-input
-            v-if="scope.row[`${props}_${type}`]"
-            v-model="scope.row[props]"
-            autosize
-            type="textarea"
-          />
-          <pre v-else>{{ scope.row[props] }}</pre>
-          <el-button
-            size="mini"
-            class="margin-top-10"
-            @click="handleEdit({ scope, type, props })"
-          >
-            {{ !scope.row[`${props}_${type}`] ? "编辑" : "完成" }}
-          </el-button>
-        </div>
-        <div v-else>{{ scope.row[props] }}</div>
-      </template>
-      <template v-if="children">
+    <el-table class="simple-table" :data="computed_list" v-loading="loading">
         <el-table-column
-          v-for="({ props, label, width, align }, index) in children"
-          :key="index"
-          :prop="props"
-          :width="width"
-          :label="label"
-          :align="align || 'center'"
+            v-for="(
+                { props, label, type, width, align, children }, index
+            ) in config"
+            :key="index"
+            :prop="props"
+            :width="width"
+            :label="label"
+            :align="align || 'center'"
         >
             <template #default="scope">
                 <div v-if="type === 'edit'">
@@ -51,7 +25,7 @@
                         autosize
                         type="textarea"
                     />
-                    <pre v-else>{{ scope.row[props] }}</pre>
+
                     <el-button
                         size="mini"
                         class="margin-top-10"
@@ -75,101 +49,143 @@
                     :align="align || 'center'"
                 >
                     <template #default="scope">
-                        <div>{{ scope.row[props] }}</div>
+                        <div v-if="type === 'edit'">
+                            <el-input
+                                v-if="scope.row[`${props}_${type}`]"
+                                v-model="scope.row[props]"
+                                autosize
+                                type="textarea"
+                            />
+                            <pre v-else>{{ scope.row[props] }}</pre>
+                            <el-button
+                                size="mini"
+                                class="margin-top-10"
+                                @click="handleEdit({ scope, type, props })"
+                            >
+                                {{
+                                    !scope.row[`${props}_${type}`]
+                                        ? "编辑"
+                                        : "完成"
+                                }}
+                            </el-button>
+                        </div>
+                        <div v-else-if="type === 'textarea'">
+                            <pre>{{ scope.row[props] }}</pre>
+                        </div>
+                        <div v-else>{{ scope.row[props] }}</div>
+                    </template>
+                    <template v-if="children">
+                        <el-table-column
+                            v-for="(
+                                { props, label, width, align }, index
+                            ) in children"
+                            :key="index"
+                            :prop="props"
+                            :width="width"
+                            :label="label"
+                            :align="align || 'center'"
+                        >
+                            <template #default="scope">
+                                <div>{{ scope.row[props] }}</div>
+                            </template>
+                        </el-table-column>
                     </template>
                 </el-table-column>
             </template>
         </el-table-column>
-      </template>
-    </el-table-column>
-    <el-table-column
-      v-if="handleRow.length"
-      label="操作"
-      :width="handleRow.length * 50"
-    >
-      <template slot-scope="scope">
-        <span
-          v-for="({ label, props, popconfirm, visible }, index) in handleRow"
-          :key="index"
-          class="padding-right-5"
+        <el-table-column
+            v-if="handleRow.length"
+            label="操作"
+            :width="handleRow.length * 50"
         >
-          <span v-if="handleFormat(visible,scope.row)">
-            <el-popconfirm v-if="popconfirm" :title="`确定要${label}吗？`">
-              <el-button
-                slot="reference"
-                @click="handleClick(props, scope.row)"
-                type="text"
-                size="small"
-                >{{ label }}</el-button
-              >
-            </el-popconfirm>
-            <el-button
-              v-else
-              @click="handleClick(props, scope.row)"
-              type="text"
-              size="small"
-              >{{ label }}</el-button
-            >
-          </span>
-        </span>
-      </template>
-    </el-table-column>
-  </el-table>
+            <template slot-scope="scope">
+                <span
+                    v-for="(
+                        { label, props, popconfirm, visible }, index
+                    ) in handleRow"
+                    :key="index"
+                    class="padding-right-5"
+                >
+                    <span v-if="handleFormat(visible, scope.row)">
+                        <el-popconfirm
+                            v-if="popconfirm"
+                            :title="`确定要${label}吗？`"
+                        >
+                            <el-button
+                                slot="reference"
+                                @click="handleClick(props, scope.row)"
+                                type="text"
+                                size="small"
+                                >{{ label }}</el-button
+                            >
+                        </el-popconfirm>
+                        <el-button
+                            v-else
+                            @click="handleClick(props, scope.row)"
+                            type="text"
+                            size="small"
+                            >{{ label }}</el-button
+                        >
+                    </span>
+                </span>
+            </template>
+        </el-table-column>
+    </el-table>
 </template>
 <script>
 export default {
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    config: {
-      type: Array,
-      default: () => [],
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    handleRow: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    computed_list() {
-      const object = {};
-      this.config
-        .filter(({ type }) => type === "edit")
-        .forEach(({ props, type }) => {
-          object[`${props}_${type}`] = false;
-        });
-      return this.list.map((element) => ({
-        ...element,
-        ...object,
-      }));
-    },
-  },
-  methods: {
-    handleFormat(params,data) {
-      let visible = true;
-      if (params) {
-        visible = false;
-        Object.keys(params).forEach((element) => {
-          if (params[element].includes(data[element])) {
-            visible = true;
-          }
-        });
-      }
-      return visible;
+    props: {
+        list: {
+            type: Array,
+            default: () => [],
+        },
+        config: {
+            type: Array,
+            default: () => [],
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        handleRow: {
+            type: Array,
+            default: () => [],
+        },
     },
-    handleClick(props, row) {
-      this.$emit(props, row);
+    computed: {
+        computed_list() {
+            const object = {};
+            this.config
+                .filter(({ type }) => type === "edit")
+                .forEach(({ props, type }) => {
+                    object[`${props}_${type}`] = false;
+                });
+            return this.list.map((element) => ({
+                ...element,
+                ...object,
+            }));
+        },
     },
-    handleEdit({ scope, type, props }) {
-      scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
-      this.$emit(props, scope.row);
+    methods: {
+        handleFormat(params, data) {
+            let visible = true;
+            if (params) {
+                visible = false;
+                Object.keys(params).forEach((element) => {
+                    if (params[element].includes(data[element])) {
+                        visible = true;
+                    }
+                });
+            }
+            return visible;
+        },
+        handleClick(props, row) {
+            this.$emit(props, row);
+        },
+        handleEdit({ scope, type, props }) {
+            scope.row[`${props}_${type}`] = !scope.row[`${props}_${type}`];
+            this.$emit(props, scope.row);
+        },
     },
-  },
 };
 </script>