feat: 表格组件新增表头配置组件, 各列表页适配此组件

songshankun

2023-09-23 7f0ec738a0af4d9d334ce85012f864f2519ebb3f

feat: 表格组件新增表头配置组件, 各列表页适配此组件

 src/components/makepager/TableCommonView.vue

@@ -21,82 +21,99 @@
    >
      <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column>
      <el-table-column align="center"
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="item.min"
        show-overflow-tooltip
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
          <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
          <span v-else-if="item.isTime">{{
            dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26"
              ? "--"
              : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
          }}</span>
          <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selCommonClick(scope.row)">{{
            scope.row[item.prop]
          }}</span>
          <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span>
          <span
            v-else-if="item.isCommonClick && scope.row[item.prop]"
            class="sel-name"
            @click="selCommonClick(scope.row)"
      <template v-for="(item, i) in tableList.tableColumn">
        <el-table-column
          align="center"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.min"
          show-overflow-tooltip
          :sortable="item.sortable"
          v-if="item.isShowColumn"
        >
          <template slot-scope="scope">
            <span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
            <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
            <span v-else-if="item.isTime">{{
                dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26"
                    ? "--"
                    : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
              }}</span>
            <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selCommonClick(scope.row)">{{
                scope.row[item.prop]
              }}</span>
            <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span>
            <span
                v-else-if="item.isCommonClick && scope.row[item.prop]"
                class="sel-name"
                @click="selCommonClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <div v-else-if="item.isProductName" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                  {{ item.name }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <div v-else-if="item.isProductAmount" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                  {{ item.amount }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <div v-else-if="item.isProductPrice" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                  {{ item.price }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <div v-else-if="item.isProductTotal" class="product-view">
            <ul v-if="scope.row.products && scope.row.products.length > 0">
              <li v-for="(item, index) in scope.row.products" :key="index">
                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                  {{ item.total }}
                </div>
              </li>
            </ul>
            <div v-else class="no-product">{{ "--" }}</div>
          </div>
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
      </el-table-column>
            >
            <div v-else-if="item.isProductName" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.name }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <div v-else-if="item.isProductAmount" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.amount }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <div v-else-if="item.isProductPrice" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.price }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <div v-else-if="item.isProductTotal" class="product-view">
              <ul v-if="scope.row.products && scope.row.products.length > 0">
                <li v-for="(item, index) in scope.row.products" :key="index">
                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
                    {{ item.total }}
                  </div>
                </li>
              </ul>
              <div v-else class="no-product">{{ "--" }}</div>
            </div>
            <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
          </template>
        </el-table-column>
      </template>
      <slot name="tableButton" />
      <div slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-table>
    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div class="styleBtn">
      <i @click="checkCol()" class="label">...</i>
      <el-checkbox-group
          v-model="showcol"
          v-show="iscolopen"
          class="checkbox-group"
          @change="selectCheckBoxList"
      >
        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
        >{{ item }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

@@ -111,6 +128,9 @@
          selectBox: false,
          selectIndex: false,
          tableInfomation: [], // 接口返回数据
          showcol: [],
          allcol: [],
          highlight: false,
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
@@ -138,11 +158,30 @@
    }
  },
  data() {
    return {}
    return {
      iscolopen: false,
      showcol:[]
    }
  },
  watch: {
    'tableList.showcol':{
      handler(newVal){
        this.showcol=newVal
      },
      immediate:true
    }
  },
  computed: {},
  mounted() {},
  methods: {
    onMaskClick() {
      this.iscolopen = false;
    },
    checkCol() {
      this.iscolopen = !this.iscolopen;
    },
    selectCheckBoxList(val) {
      this.$emit("selTableCol", val);
    },
    handleReserve(row) {
      return row._id ? row._id : row.id
    },
@@ -299,6 +338,7 @@
  // margin-top: 20px;
  // margin-right: 10px;
  // margin-bottom: 40px;
  position: relative;
  height: 100%;
  .blue {
    width: 70px;
@@ -363,4 +403,50 @@
    padding: 4px 0;
  }
}

.overSpread1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10;
}

.styleBtn {
  position: absolute;
  width: 30px;
  height: 36px;
  // line-height: 26px;
  // background: #06c062;
  top: 0;
  right: 2px;
  z-index: 9999;
  .label {
    position: absolute;
    top: 6px;
    font-size: 20px;
    // line-height: 5px;
    cursor: pointer;
    color: #000;
    transform: rotate(-90deg);
  }
  .checkbox-group {
    width: 160px;
    height: 330px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    line-height: 25px;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 99;
    box-shadow: 0 0 2px 2px #f8f8f8;
  }
}
</style>

 src/views/productManage/product/index.vue

@@ -26,7 +26,12 @@
    <div class="body">
      <div class="body-card">
        <div class="list-view">
          <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick">
          <TableCommonView
            ref="tableListRef"
            :table-list="tableList"
            @selCommonClick="selCommonClick"
            @selTableCol="selTableCol"
          >
            <!-- <template slot="tableButton">
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
@@ -76,7 +81,20 @@
        visible: false,
        title: "新建",
        infomation: {}
      }
      },
      tableColumn: [
        { label: "产品编码", prop: "number", min: 190, isCommonClick: true },
        { label: "产品名称", prop: "name", min: 130 },
        { label: "供应商", prop: "supplierName", min: 130 },
        { label: "产品类别", prop: "productType", min: 130 },
        { label: "规格", prop: "specifications", min: 130 },
        { label: "型号", prop: "modelNumber", min: 130 },
        { label: "单位", prop: "unit", min: 60 },
        { label: "价格", prop: "purchasePrice", min: 130 },
        { label: "最低库存", prop: "minimumStock", min: 80 },
        { label: "最高库存", prop: "maximumStock", min: 80 }
      ],
      showCol: ['产品编码', '产品名称', '供应商', '产品类别', '规格', '型号', '单位', '价格', '最低库存', '最高库存']
    }
  },
  created() {
@@ -84,23 +102,24 @@
    this.getData()
  },
  methods: {
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "产品编码", prop: "number", min: 190, isCommonClick: true },
          { label: "产品名称", prop: "name", min: 130 },
          { label: "供应商", prop: "supplierName", min: 130 },
          { label: "产品类别", prop: "productType", min: 130 },
          { label: "规格", prop: "specifications", min: 130 },
          { label: "型号", prop: "modelNumber", min: 130 },
          { label: "单位", prop: "unit", min: 60 },
          { label: "价格", prop: "purchasePrice", min: 130 },
          { label: "最低库存", prop: "minimumStock", min: 80 },
          { label: "最高库存", prop: "maximumStock", min: 80 }
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);

      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
@@ -108,6 +127,10 @@
        this.searchOptions.push({ value: value, label: label })
      }
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {
      await getProductList({

 src/views/purchaseManage/purchase/index.vue

@@ -22,6 +22,7 @@
              ref="tableListRef"
              :table-list="tableList"
              @selCommonClick="selCommonClick"
              @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column  label="状态" width="120">
@@ -84,7 +85,18 @@
        title: "创建",
        infomation: {}
      },
      purchaseStatusList: getDataByType("purchaseStatus")
      purchaseStatusList: getDataByType("purchaseStatus"),
      tableColumn: [
        { label: "采购单号", prop: "number", min: 150, isCommonClick: true },
        { label: "采购单名称", prop: "name", min: 130, isCommonClick: true },
        { label: "单据类型", prop: "orderType", min: 130 },
        { label: "供应商名称", prop: "contact", min: 130 },
        { label: "采购数量", prop: "quantity", min: 130 },
        { label: "收货仓库", prop: "warehouse", min: 130 },
        { label: "经办人", prop: "handledBy", min: 130 },
        { label: "制单人", prop: "creator", min: 130 }
      ],
      showCol: ['采购单号', '采购单名称', '单据类型', '供应商名称', '采购数量', '收货仓库', '经办人', '制单人']
    }
  },
  created() {
@@ -103,21 +115,27 @@
        return "--"
      }
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "采购单号", prop: "number", min: 150, isCommonClick: true },
          { label: "采购单名称", prop: "name", min: 130, isCommonClick: true },
          { label: "单据类型", prop: "orderType", min: 130 },
          { label: "供应商名称", prop: "contact", min: 130 },
          { label: "采购数量", prop: "quantity", min: 130 },
          { label: "收货仓库", prop: "warehouse", min: 130 },
          { label: "经办人", prop: "handledBy", min: 130 },
          { label: "制单人", prop: "creator", min: 130 }
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {

 src/views/purchaseManage/quality/index.vue

@@ -21,6 +21,7 @@
              ref="tableListRef"
              :table-list="tableList"
              @selCommonClick="selCommonClick"
              @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column align="center" label="状态" width="120">
@@ -72,6 +73,18 @@
      },
      search: {},
      qualityStatusList:getDataByType('qualityStatus'),
      tableColumn: [
        { label: "质检单编号", prop: "number", min: 190, isCommonClick: true },
        { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
        { label: "单据类型", prop: "contact_name", min: 130 },
        { label: "供应商名称", prop: "contact_phone", min: 130 },
        { label: "到货仓库", prop: "sales_resources", min: 130 },
        { label: "质检数量", prop: "province", min: 130 },
        { label: "检验员", prop: "city", min: 130 },
        // { label: "状态", prop: "member_name", min: 110 },
        { label: "质检时间", prop: "member_name", min: 150 },
      ],
      showCol: ['质检单编号', '采购单编号', '单据类型', '供应商名称', '到货仓库', '质检数量', '检验员', '质检时间']
    }
  },
  created() {
@@ -90,22 +103,27 @@
        return "--";
      }
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "质检单编号", prop: "number", min: 190, isCommonClick: true },
          { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
          { label: "单据类型", prop: "contact_name", min: 130 },
          { label: "供应商名称", prop: "contact_phone", min: 130 },
          { label: "到货仓库", prop: "sales_resources", min: 130 },
          { label: "质检数量", prop: "province", min: 130 },
          { label: "检验员", prop: "city", min: 130 },
          // { label: "状态", prop: "member_name", min: 110 },
          { label: "质检时间", prop: "member_name", min: 150 },
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {

 src/views/purchaseManage/returned/index.vue

@@ -21,6 +21,7 @@
             ref="tableListRef"
             :table-list="tableList"
             @selCommonClick="selCommonClick"
             @selTableCol="selTableCol"
         >
           <template slot="tableButton">
             <el-table-column align="center" label="状态" width="120">
@@ -74,6 +75,19 @@
      },
      search: '',
      returnedStatusList:getDataByType('returnedStatus'),
      tableColumn: [
        { label: "退货单编号", prop: "number", min: 190, isCommonClick: true },
        { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
        { label: "单据类型", prop: "contact_name", min: 130 },
        { label: "供应商名称", prop: "contact_phone", min: 130 },
        { label: "退货仓库", prop: "sales_resources", min: 130 },
        { label: "退货理由", prop: "province", min: 180 },
        { label: "经办人", prop: "city", min: 130 },
        { label: "制单人", prop: "member_name", min: 130 },
        { label: "退货日期", prop: "member_name", min: 150 },
        // { label: "状态", prop: "member_name", min: 110 }
      ],
      showCol: ['退货单编号', '采购单编号', '单据类型', '供应商名称', '退货仓库', '退货理由', '经办人', '制单人', '退货日期']
    }
  },
  created() {
@@ -92,23 +106,27 @@
        return "--";
      }
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "退货单编号", prop: "number", min: 190, isCommonClick: true },
          { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
          { label: "单据类型", prop: "contact_name", min: 130 },
          { label: "供应商名称", prop: "contact_phone", min: 130 },
          { label: "退货仓库", prop: "sales_resources", min: 130 },
          { label: "退货理由", prop: "province", min: 180 },
          { label: "经办人", prop: "city", min: 130 },
          { label: "制单人", prop: "member_name", min: 130 },
          { label: "退货日期", prop: "member_name", min: 150 },
          // { label: "状态", prop: "member_name", min: 110 }
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {

 src/views/supplierManage/supplier/index.vue

@@ -23,6 +23,7 @@
                :table-list="tableList"
                @selCommonClick="selCommonClick"
                @tableRowClick="tableRowClick"
                @selTableCol="selTableCol"
            >
              <template slot="tableButton">
                <el-table-column label="操作" width="100">
@@ -77,6 +78,7 @@
                :table-list="productTableList"
                @selCommonClick="selCommonClick"
                @getSelectArray="getSelectArray"
                @selTableCol="selProductTableCol"
            >
              <template slot="tableButton">
                <el-table-column label="操作" width="170">
@@ -157,7 +159,28 @@
        pageSize: 10,
        totalCount: 0
      },
      supplierId: 0
      supplierId: 0,
      showCol:['供应商编号','供应商名称','供应商类型','所属行业','联系人','联系电话','状态','创建时间'],
      tableColumn: [
        { label: "供应商编号", prop: "number", min: 190, isCommonClick: true },
        { label: "供应商名称", prop: "name", min: 130 },
        { label: "供应商类型", prop: "supplierType", min: 130 },
        { label: "所属行业", prop: "industry", min: 130 },
        { label: "联系人", prop: "contact", min: 130 },
        { label: "联系电话", prop: "phone", min: 130 },
        { label: "状态", prop: "status_name", min: 130 },
        { label: "创建时间", prop: "created_at", min: 130 }
      ],
      showProductCol:['产品编码','产品名称','产品规格','单位','采购价格','供货时长(天)','物流时长(天)'],
      productColumn:[
        { label: "产品编码", prop: "number", min: 190 },
        { label: "产品名称", prop: "name", min: 130 },
        { label: "产品规格", prop: "specifications", min: 130 },
        { label: "单位", prop: "unit", min: 130 },
        { label: "采购价格", prop: "purchasePrice", min: 130 },
        { label: "供货时长(天)", prop: "deliveryTime", min: 130 },
        { label: "物流时长(天)", prop: "shippingDuration", min: 130 }
      ]
    }
  },
  created() {
@@ -166,23 +189,34 @@
    this.getData()
  },
  methods: {
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setProductColumnVisible(showCol){
      return  this.productColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        highlight: true,
        ref: "tableListRef",
        tableColumn: [
          { label: "供应商编号", prop: "number", min: 190, isCommonClick: true },
          { label: "供应商名称", prop: "name", min: 130 },
          { label: "供应商类型", prop: "supplierType", min: 130 },
          { label: "所属行业", prop: "industry", min: 130 },
          { label: "联系人", prop: "contact", min: 130 },
          { label: "联系电话", prop: "phone", min: 130 },
          { label: "状态", prop: "status_name", min: 130 },
          { label: "创建时间", prop: "created_at", min: 130 }
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn: this.setColumnVisible(this.showCol),
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);

      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
@@ -190,20 +224,18 @@
        this.searchOptions.push({ value: value, label: label })
      }
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    setProductTable() {
      this.productTableList = {
        tableInfomation: [],
        selectBox: true,
        selectIndex: true,
        tableColumn: [
          { label: "产品编码", prop: "number", min: 190 },
          { label: "产品名称", prop: "name", min: 130 },
          { label: "产品规格", prop: "specifications", min: 130 },
          { label: "单位", prop: "unit", min: 130 },
          { label: "采购价格", prop: "purchasePrice", min: 130 },
          { label: "供货时长(天)", prop: "deliveryTime", min: 130 },
          { label: "物流时长(天)", prop: "shippingDuration", min: 130 }
        ]
        showcol: this.showProductCol,
        allcol: [],
        tableColumn: this.setProductColumnVisible(this.showProductCol),
      }
      this.searchProductOptions = []
      for (let i = 0; i < this.productTableList.tableColumn.length; i++) {
@@ -211,6 +243,13 @@
        const value = this.productTableList.tableColumn[i].prop
        this.searchProductOptions.push({ value: value, label: label })
      }

      this.productTableList.allcol = this.productTableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
      console.log('this.productTableList',this.productTableList)
    },
    selProductTableCol(val) {
      this.showProductCol = val;
      this.productTableList.tableColumn = this.setProductColumnVisible(val);
    },
    // 请求数据
    getData() {