公共表格增加单个表格class添加方法

增加枚举数据显示方法

src/components/tableTemp/index.vue

@@ -1,53 +1,18 @@
+import { default } from '../../../../CABaggageData2.0/src/components/BackButton/index.vue';
 <template>
   <el-table
     v-el-table-infinite-scroll="load"
-    :row-key="
-      props.tableProperty.rowKey
-        ? props.tableProperty.rowKey
-        : tablePropertyDefault.rowKey
-    "
+    :row-key="props.tableProperty.rowKey ? props.tableProperty.rowKey : tablePropertyDefault.rowKey"
     :row-style="rowStyle"
     :data="props.tableData"
-    :height="
-      props.tableProperty.height
-        ? props.tableProperty.height
-        : tablePropertyDefault.height
-    "
-    :max-height="
-      props.tableProperty.maxHeight
-        ? props.tableProperty.maxHeight
-        : tablePropertyDefault.maxHeight
-    "
-    :stripe="
-      props.tableProperty.stripe
-        ? props.tableProperty.stripe
-        : tablePropertyDefault.stripe
-    "
-    :border="
-      props.tableProperty.border
-        ? props.tableProperty.border
-        : tablePropertyDefault.border
-    "
-    :highlight-current-row="
-      props.tableProperty.highlightCurrentRow
-        ? props.tableProperty.highlightCurrentRow
-        : tablePropertyDefault.highlightCurrentRow
-    "
-    :header-cell-class-name="
-      props.tableProperty.headerRowClassName
-        ? props.tableProperty.headerRowClassName
-        : tablePropertyDefault.headerRowClassName
-    "
-    :tooltip-effect="
-      props.tableProperty.tooltipEffect
-        ? props.tableProperty.tooltipEffect
-        : tablePropertyDefault.tooltipEffect
-    "
-    :show-summary="
-      props.tableProperty.showSummary
-        ? props.tableProperty.showSummary
-        : tablePropertyDefault.showSummary
-    "
+    :height=" props.tableProperty.height ? props.tableProperty.height : tablePropertyDefault.height"
+    :max-height=" props.tableProperty.maxHeight ? props.tableProperty.maxHeight : tablePropertyDefault.maxHeight"
+    :stripe="props.tableProperty.stripe ? props.tableProperty.stripe : tablePropertyDefault.stripe"
+    :border="props.tableProperty.border ? props.tableProperty.border : tablePropertyDefault.border"
+    :highlight-current-row="props.tableProperty.highlightCurrentRow ? props.tableProperty.highlightCurrentRow : tablePropertyDefault.highlightCurrentRow"
+    :header-cell-class-name=" props.tableProperty.headerRowClassName ? props.tableProperty.headerRowClassName : tablePropertyDefault.headerRowClassName"
+    :tooltip-effect="props.tableProperty.tooltipEffect ? props.tableProperty.tooltipEffect : tablePropertyDefault.tooltipEffect"
+    :show-summary="props.tableProperty.showSummary ? props.tableProperty.showSummary : tablePropertyDefault.showSummary"
     :row-class-name="tableRowClassName"
     :cell-class-name="cellClassName"
   >
@@ -59,26 +24,22 @@
       :label="items.label"
       :prop="items.key"
       :width="props.tableColumnProperty.width"
-      :sortable="
-        items.sortable ? items.sortable : props.tableColumnProperty.sortable
-      "
+      :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable"
       :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip"
       :align="items.align ? items.align : props.tableColumnProperty.align"
-      :header-align="
-        items.headerAlign
-          ? items.headerAlign
-          : props.tableColumnProperty.headerAlign
-      "
+      :header-align="items.headerAlign ? items.headerAlign : props.tableColumnProperty.headerAlign"
       :label-class-name="items.lableClass ? items.lableClass : ''"
     >
       <template #default="scope">
-        {{ scope.row[items.key] }}
+        <!-- 枚举值则为 items.key+'-enum' -->
+        {{ scope.row[items.key+'-enum'] ? scope.row[items.key+'-enum']:scope.row[items.key]}}
       </template>
     </el-table-column>
     <el-table-column
       v-if="props.tableBtnGroup.length"
       label="操作"
       :align="props.tableColumnProperty.align"
+      :width="BtnGroupWidth"
     >
       <template #default="scope">
         <el-button
@@ -145,6 +106,7 @@ const props = defineProps({
       headerAlign: "",
     },
   },
+  //操作栏按钮组
   tableBtnGroup: {
     type: Array,
     default: [
@@ -160,14 +122,22 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  //操作栏宽度
+  BtnGroupWidth:{
+    type:String,
+    default:""
+  }
 });
-//向父组件传参 btnClick：点击按钮后    load  触发下拉加载
-const emit = defineEmits(["btnClick", "load"]);
+
+//向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
+const emit = defineEmits(["btnClick", "load","cellClass"]);
+
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
 const handleClick = (index: number, row: Object, param: number) => {
   emit("btnClick", index, row, param);
 };
 
+//行公共样式
 const rowStyle = (row: Object, rowIndex: number) => {
   let styleJson: Object = {
     height: "50px",
@@ -185,16 +155,21 @@ const tableRowClassName = (row: Object, rowIndex: number) => {
   return "";
 };
 
+//给某一格加class
+const cellClass=ref("")
 const cellClassName = (row: Object) => {
-  // console.log(row.row)
-  // console.log(row.column)
-  // console.log(row.rowIndex)
-  // console.log(row.columnIndex)
+  emit("cellClass",row)
+  return cellClass.value;
 };
 //滚动分页加载
 const load = () => {
   emit("load", true);
 };
+
+defineExpose({
+  cellClass
+})
+
 </script>
 
 <style scoped lang="scss">

src/views/table/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="app-container scroll-y">
     <tableTemp
+      ref="domeTable"
       :tableHeader="state.list"
       :tableProperty="{ rowKey: 'ID' }"
       :tableData="tableData"
       :tableBtnGroup="tableBtnGroup"
+      :cellClass="cellClassName"
       @btnClick="btnClick"
       @load="loadMore"
+      @cellClass="test"
     ></tableTemp>
   </div>
 </template>
@@ -14,177 +17,148 @@
 <script setup lang="ts">
 import tableTemp from "@/components/tableTemp/index.vue";
 import { ref } from "vue";
-const props = defineProps({
-  //单独的编辑新增
-  tableBtnGroup: {
-    type: Array,
-    default: () => [
-      {
-        name: "编辑",
-        className: "editBtn",
-        param: 2,
-      },
+import { test } from 'vitest';
+const state = reactive({
+  list: [
+    { label: "序号", key: "ID", sortable: true },
+    { label: "姓名", key: "NAME" },
+    { label: "成绩", key: "score", sortable: true, lableClass: "scoreColumn" },
+  ],
+  listLoading: true,
+});
+const tableData = ref([
+  {
+    ID: 0,
+    NAME: "张三",
+    score: "100",
+    children: [
       {
-        name: "删除",
-        className: "delBtn",
-        param: 3,
+        ID: 2,
+        NAME: "王麻子",
+        score: "50",
+        rowClass: "warning-row",
       },
     ],
   },
-  //列表
-  tableData: {
-    type: Array,
-    default: () => [],
+  {
+    ID: 1,
+    NAME: "李四三",
+    score: "80",
   },
-  //表头
-  state: {
-    type: Object,
-    default: () => [],
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
   },
-});
-// const state = reactive({
-//   list: [
-//     { label: "序号", key: "ID", sortable: true },
-//     { label: "姓名", key: "NAME" },
-//     { label: "成绩", key: "score", sortable: true, lableClass: "scoreColumn" },
-//   ],
-//   listLoading: true,
-// });
-// const tableData = ref([
-//   {
-//     ID: 0,
-//     NAME: "张三",
-//     score: "100",
-//     children: [
-//       {
-//         ID: 2,
-//         NAME: "王麻子",
-//         score: "50",
-//         rowClass: "warning-row",
-//       },
-//     ],
-//   },
-//   {
-//     ID: 1,
-//     NAME: "李四三",
-//     score: "80",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-//   {
-//     ID: 2,
-//     NAME: "王麻子",
-//     score: "50",
-//     rowClass: "warning-row",
-//   },
-// ]);
-// if () {
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+  {
+    ID: 2,
+    NAME: "王麻子",
+    score: "50",
+    rowClass: "warning-row",
+  },
+]);
 
-// }
-// const tableBtnGroup = ref([
-//   {
-//     name: "编辑",
-//     className: "editBtn",
-//     param: 2,
-//   },
-//   {
-//     name: "删除",
-//     className: "delBtn",
-//     param: 3,
-//   },
-// ]);
+const tableBtnGroup = ref([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]);
 const emits = defineEmits(["editDialog", "eleDialog", "aloneDialog"]);
 //编辑-删除
 const btnClick = (row, index, param) => {
@@ -202,9 +176,23 @@ const btnClick = (row, index, param) => {
 const loadMore = (type) => {
   console.log(type);
 };
+
+const domeTable =ref(null)
+const test = (row) => {
+  if(row.column.property==="score"&& row.row.score>80){
+    console.log(domeTable.value)
+    domeTable.value.cellClass ="warn"
+  }
+  else{
+    domeTable.value.cellClass =""
+  }
+}
 </script>
 
 <style scoped lang="scss">
+::v-deep.el-table .warn {
+  background: #dfb21c !important;
+}
 ::v-deep.el-table .scoreColumn {
   background: #eb2f3b !important;
 }