mistable更新

src/views/mis/codingManagement/meterType-index.vue

@@ -138,9 +138,11 @@ export default {
           label: "是否启用",
           prop: "isdisabled",
           align: "center",
-          formatter: function (row, column, cellValue, index) {
-            return cellValue == 1 ? "是" : "否";
-          },
+          renderer: function (h, row, column, value, index) {
+            return <el-switch v-model={value} active-text="是" inactive-text="否" active-value="1" inactive-value="0"
+              inactive-color="lightgray">
+            </el-switch>
+          }
         },
       ],
       dataList: [], // 表格数据

src/views/mis/common/misTable/RenderColumn.vue

@@ -0,0 +1,18 @@
+<script>
+export default {
+  props: {
+    renderer: {
+      type: Function,
+      default: () => () => { }
+    },
+    scope: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  render(h) {
+    const { row, column, value, index } = this.scope;
+    return this.renderer(h, row, column, value, index);
+  }
+}
+</script>

src/views/mis/common/misTable/index.vue

@@ -2,35 +2,13 @@
   <div style="height: 100%">
     <!-- 表格组件 :max-height="tableheight"  :height=" tableheight + 'px'" -->
     <div class="datatable" :class="pagination ? 'inpage' : 'nopage'">
-      <el-table
-        ref="multipleTable"
-        v-loading="loadingValue"
-        :data="tableData"
-        tooltip-effect="dark"
-        :style="{ width: '100%' }"
-        height="100%"
-        :border="border"
-        :show-summary="summary"
-        :cell-style="cellStyleF"
-        :header-cell-style="headerStyle"
-        :stripe="stripe"
-        :summary-method="getSummaries"
-        :span-method="objectSpanMethod"
-        :header-row-style="headerRowStyle"
-        :row-class-name="tableRowClassName"
-        :cell-class-name="cellClassName"
-        :row-style="rowStyle"
-        :show-overflow-tooltip="true"
-        @selection-change="handleSelectionChange"
-        @row-dblclick="rowDblclick"
-        @row-click="rowClick"
-        @cell-dblclick="cellDblclick"
-        @select="select"
-        @cell-click="cellClick"
-        @select-all="selectAll"
-        @sort-change="sortChange"
-        :highlight-current-row="isHighlight"
-      >
+      <el-table ref="multipleTable" v-loading="loadingValue" :data="tableData" tooltip-effect="dark"
+        :style="{ width: '100%' }" height="100%" :border="border" :show-summary="summary" :cell-style="cellStyleF"
+        :header-cell-style="headerStyle" :stripe="stripe" :summary-method="getSummaries" :span-method="objectSpanMethod"
+        :header-row-style="headerRowStyle" :row-class-name="tableRowClassName" :cell-class-name="cellClassName"
+        :row-style="rowStyle" :show-overflow-tooltip="true" @selection-change="handleSelectionChange"
+        @row-dblclick="rowDblclick" @row-click="rowClick" @cell-dblclick="cellDblclick" @select="select"
+        @cell-click="cellClick" @select-all="selectAll" @sort-change="sortChange" :highlight-current-row="isHighlight">
         <!-- highlight-current-row -->
         <!-- @current-change="TablehandleCurrentChange" -->
         <template slot="empty">
@@ -38,38 +16,21 @@
           <p class="empty-p">暂无数据</p>
         </template>
         <el-table-column v-if="multiple" type="selection" width="40" />
-        <el-table-column
-          v-if="forId"
-          label="序号"
-          type="index"
-          width="50"
-          align="center"
-          fixed="left"
-        />
-        <el-table-column
-          v-for="(item, colIndex) of column.filter(
-            (ele) =>
-              ele.prop &&
-              ele.prop !== 'image' &&
-              ele.prop !== 'lqSl' &&
-              ele.slotScoped !== 'tags' &&
-              ele.slotScoped !== 'operation' &&
-              ele.slotScoped !== 'operationIcon' &&
-              ele.slotScoped !== 'father'
-          )"
-          :key="colIndex"
-          :prop="item.prop"
-          :label="item.label"
-          :width="item.width"
-          :align="item.hasOwnProperty('align') ? item.align : 'center'"
-          :sortable="item.sortable"
-          :show-overflow-tooltip="
-            item.hasOwnProperty('showoverflowtooltip')
-              ? item.showoverflowtooltip
-              : true
-          "
-          :fixed="item.hasOwnProperty('fixed') ? item.fixed : false"
-        >
+        <el-table-column v-if="forId" label="序号" type="index" width="50" align="center" fixed="left" />
+        <el-table-column v-for="(item, colIndex) of column.filter(
+          (ele) =>
+            ele.prop &&
+            ele.prop !== 'image' &&
+            ele.prop !== 'lqSl' &&
+            ele.slotScoped !== 'tags' &&
+            ele.slotScoped !== 'operation' &&
+            ele.slotScoped !== 'operationIcon' &&
+            ele.slotScoped !== 'father'
+        )" :key="colIndex" :prop="item.prop" :label="item.label" :width="item.width"
+          :align="item.hasOwnProperty('align') ? item.align : 'center'" :sortable="item.sortable" :show-overflow-tooltip="item.hasOwnProperty('showoverflowtooltip')
+            ? item.showoverflowtooltip
+            : true
+            " :fixed="item.hasOwnProperty('fixed') ? item.fixed : false">
           <template slot-scope="{ row }">
             <!-- <template v-if="row[item.prop]||String(row[item.prop])==='0'||String(row[item.prop])==='00'">
             <span v-if="item.formatter" v-html="(item.formatter)(row,item.prop,row[item.prop],colIndex)" />
@@ -79,11 +40,11 @@
             <span>--</span>
           </template> -->
             <template v-if="item.formatter">
-              <span
-                v-html="
-                  item.formatter(row, item.prop, row[item.prop], colIndex)
-                "
-              />
+              <span v-html="item.formatter(row, item.prop, row[item.prop], colIndex)" />
+            </template>
+            <template v-else-if="item.renderer">
+              <render-column :renderer="item.renderer"
+                :scope="{ row, column: item.prop, value: row[item.prop], index: colIndex }" />
             </template>
             <template v-else>
               <!-- 添加百分比格式 -->
@@ -91,176 +52,94 @@
               <span v-else-if="item.prop2 && row[item.prop2][item.prop]">{{
                 row[item.prop2][item.prop]
               }}</span>
-              <span
-                v-else-if="
-                  row[item.prop] ||
+              <span v-else-if="row[item.prop] ||
                   String(row[item.prop]) === '0' ||
                   String(row[item.prop]) === '00'
-                "
-                >{{ row[item.prop] }}</span
-              >
+                  ">{{ row[item.prop] }}</span>
               <span v-else>--</span>
             </template>
           </template>
         </el-table-column>
 
         <!-- 附件下载 -->
-        <el-table-column
-          v-for="item of column.filter((ele) => ele.slotScoped === 'dwonfile')"
-          :key="item.prop"
-          :label="item.label"
-          :width="item.width"
-        >
+        <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'dwonfile')" :key="item.prop"
+          :label="item.label" :width="item.width">
           <template v-if="data.row.isdownfile" slot-scope="data">
-            <span
-              v-for="act in item.acts"
-              :key="act.emitWay"
-              :style="{
-                color: act.color,
-                cursor: 'pointer',
-                marginRight: '10px',
-              }"
-              @click.stop="operation(act.emitWay, data)"
-            >
+            <span v-for="act in item.acts" :key="act.emitWay" :style="{
+              color: act.color,
+              cursor: 'pointer',
+              marginRight: '10px',
+            }" @click.stop="operation(act.emitWay, data)">
               {{ act.operation }}
             </span>
           </template>
         </el-table-column>
         <!-- 操作 -->
-        <el-table-column
-          v-for="item of column.filter((ele) => ele.slotScoped === 'action')"
-          :key="item.prop"
-          :label="item.label"
-          :width="item.width"
-          :align="item.hasOwnProperty('align') ? item.align : 'center'"
-        >
+        <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'action')" :key="item.prop"
+          :label="item.label" :width="item.width" :align="item.hasOwnProperty('align') ? item.align : 'center'">
           <template slot-scope="data">
-            <span
-              v-for="act in item.acts"
-              :key="act.emitWay"
-              :style="{
-                color: act.color,
-                cursor: 'pointer',
-                marginRight: '10px',
-              }"
-              @click.stop="operation(act.emitWay, data)"
-            >
+            <span v-for="act in item.acts" :key="act.emitWay" :style="{
+              color: act.color,
+              cursor: 'pointer',
+              marginRight: '10px',
+            }" @click.stop="operation(act.emitWay, data)">
               {{ act.operation }}
             </span>
           </template>
         </el-table-column>
         <!-- 多级 -->
-        <el-table-column
-          v-for="item of column.filter((ele) => ele.slotScoped === 'father')"
-          :key="item.label"
-          :label="item.label"
-          :width="item.width"
-        >
-          <el-table-column
-            v-for="data of item.children"
-            :key="data.prop"
-            :prop="data.prop"
-            :label="data.label"
-            :width="data.width"
-          />
+        <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'father')" :key="item.label"
+          :label="item.label" :width="item.width">
+          <el-table-column v-for="data of item.children" :key="data.prop" :prop="data.prop" :label="data.label"
+            :width="data.width" />
         </el-table-column>
         <!-- 操作 -->
-        <el-table-column
-          v-for="item of column.filter((ele) => ele.slotScoped === 'operation')"
-          :key="item.label"
-          :label="item.label"
-          :width="item.width"
-        >
+        <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'operation')" :key="item.label"
+          :label="item.label" :width="item.width">
           <template slot-scope="scope">
-            <span
-              :style="{
-                color: '#409EFF',
-                cursor: 'pointer',
-                marginRight: '10px',
-              }"
-              @click.stop="operationClick(scope.row)"
-              >{{ item.prop }}</span
-            >
+            <span :style="{
+              color: '#409EFF',
+              cursor: 'pointer',
+              marginRight: '10px',
+            }" @click.stop="operationClick(scope.row)">{{ item.prop }}</span>
           </template>
         </el-table-column>
         <!-- 图标操作 -->
-        <el-table-column
-          v-for="item of column.filter(
-            (ele) => ele.slotScoped === 'operationIcon'
-          )"
-          :key="item.label"
-          :label="item.label"
-          :width="item.width"
-        >
+        <el-table-column v-for="item of column.filter(
+          (ele) => ele.slotScoped === 'operationIcon'
+        )" :key="item.label" :label="item.label" :width="item.width">
           <template slot-scope="scope">
             <el-tooltip :content="item.content" placement="bottom">
-              <i
-                :class="item.prop"
-                style="cursor: pointer"
-                @click.stop="operationClickIcon(scope.row)"
-              />
+              <i :class="item.prop" style="cursor: pointer" @click.stop="operationClickIcon(scope.row)" />
             </el-tooltip>
           </template>
         </el-table-column>
         <!-- //筛选 -->
-        <el-table-column
-          v-for="item of column.filter((ele) => ele.slotScoped === 'tags')"
-          :key="item.prop"
-          :label="item.label"
-          :prop="item.prop"
-          :width="item.width"
-          :filter-method="filterTag"
-          :filters="filters"
-          filter-placement="bottom-end"
-        >
+        <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'tags')" :key="item.prop"
+          :label="item.label" :prop="item.prop" :width="item.width" :filter-method="filterTag" :filters="filters"
+          filter-placement="bottom-end">
           <template slot-scope="scope">
-            <el-tag
-              :type="scope.row[item.prop] === '0' ? 'primary' : 'danger'"
-              disable-transitions
-              >{{ tagNamelist[scope.row[item.prop]] }}</el-tag
-            >
+            <el-tag :type="scope.row[item.prop] === '0' ? 'primary' : 'danger'" disable-transitions>{{
+              tagNamelist[scope.row[item.prop]] }}</el-tag>
           </template>
         </el-table-column>
         <!-- sortable排序 show-overflow-tooltip影藏 -->
         <!-- 图片 -->
-        <el-table-column
-          v-for="item in column.filter((ele) => ele.prop === 'image')"
-          :key="item.prop"
-          :prop="item.prop"
-          :label="item.label"
-          :width="item.width"
-        >
+        <el-table-column v-for="item in column.filter((ele) => ele.prop === 'image')" :key="item.prop" :prop="item.prop"
+          :label="item.label" :width="item.width">
           <template slot-scope="scope">
             <el-popover placement="top-start" title trigger="click">
-              <img
-                :src="scope.row.image"
-                alt
-                style="width: 100%; height: 100%"
-              />
-              <img
-                slot="reference"
-                :src="scope.row.image"
-                style="width: 50px; height: 50px"
-              />
+              <img :src="scope.row.image" alt style="width: 100%; height: 100%" />
+              <img slot="reference" :src="scope.row.image" style="width: 50px; height: 50px" />
             </el-popover>
           </template>
         </el-table-column>
         <!-- //加入计数器 -->
-        <el-table-column
-          v-for="item in column.filter((ele) => ele.prop === 'lqSl')"
-          :key="item.prop"
-          :prop="item.prop"
-          :label="item.label"
-          :width="item.width"
-        >
+        <el-table-column v-for="item in column.filter((ele) => ele.prop === 'lqSl')" :key="item.prop" :prop="item.prop"
+          :label="item.label" :width="item.width">
           <template slot-scope="scope">
             <div @click.stop>
-              <el-input-number
-                v-model="scope.row.lqSl"
-                :min="0"
-                :max="scope.row.kcNum"
-                size="mini"
-              />
+              <el-input-number v-model="scope.row.lqSl" :min="0" :max="scope.row.kcNum" size="mini" />
             </div>
 
             <!-- @change="handleCareOrderItemNumChange(scope.row)" -->
@@ -269,23 +148,18 @@
       </el-table>
     </div>
     <div v-if="pagination" class="pagination-area">
-      <el-pagination
-        :current-page="currentpage"
-        :page-sizes="[1, 10, 20, 30, 50, 100, 500, 1000]"
-        :page-size="pagesize"
-        :total="total"
-        background
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <el-pagination :current-page="currentpage" :page-sizes="[1, 10, 20, 30, 50, 100, 500, 1000]" :page-size="pagesize"
+        :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
     </div>
   </div>
 </template>
 
 <script>
+import RenderColumn from "./RenderColumn.vue";
 export default {
   name: "Table",
+  components: { RenderColumn },
   props: {
     tableData: {
       type: Array,
@@ -300,7 +174,7 @@ export default {
     // eslint-disable-next-line vue/require-default-prop
     tagNamelist: {
       type: Object,
-      default: () => {},
+      default: () => { },
       required: false,
     },
     column: {
@@ -385,21 +259,21 @@ export default {
       // default: () => {
       //   return Function
       // }
-      default: () => () => {},
+      default: () => () => { },
     },
     objectSpanMethod: {
       type: Function,
       // default: () => {
       //   return Function
       // }
-      default: () => () => {},
+      default: () => () => { },
     },
     getSummaries: {
       type: Function,
       // default: () => {
       //   return Function
       // }
-      default: () => () => {},
+      default: () => () => { },
     },
     // filterTag: {
     //   type: Function,
@@ -623,21 +497,18 @@ export default {
 </script>
 <style lang='scss'>
 /* 斑马线颜色 */
-.el-table--striped
-  .el-table__body
-  tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
-  td {
+.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
   background-color: #f7f7f7;
 }
 
 /* 行高亮样式点击当前行样式背景高亮 */
-.el-table__body /deep/ tr.current-row > td {
+.el-table__body /deep/ tr.current-row>td {
   background: #fdf3ea !important;
   color: #f19944;
 }
 
 /* 实现hover前行样式背景高亮 */
-.el-table--enable-row-hover .el-table__body tr:hover > td {
+.el-table--enable-row-hover .el-table__body tr:hover>td {
   background-color: #fdf3ea !important;
   color: #f19944;
 }
@@ -652,7 +523,7 @@ export default {
   padding: 2px 0 !important;
 }
 
-.el-table th > .cell {
+.el-table th>.cell {
   white-space: nowrap;
 }
 
@@ -665,7 +536,7 @@ export default {
   }
 }
 
-.el-table__body tr.current-row > td {
+.el-table__body tr.current-row>td {
   background-color: #69a8ea !important;
   /* background-color:red !important; */
   color: #fff;
@@ -698,7 +569,7 @@ export default {
   align-self: flex-end; */
 }
 
-.pagination-area > .el-pagination {
+.pagination-area>.el-pagination {
   position: relative;
   top: 50%;
   transform: translate(0, -50%);