表格框架页组件

博客围绕表格框架页组件展开,介绍了其各部分内容,如查询条件、操作按钮、表格、分页等的设置方式,还提及组件的用法、参数、事件以及fieldList参数,最后给出了组件代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表格框架页组件

适用于含有“查询条件”、“操作按钮”、“表格”、“分页”内容的页面开发,使此类页面尽量做到样式统一,以及减少不必要的重复搬砖。
  • “查询条件” 部分:具体的查询条件字段需自行写在name为searchBar的slot中。
  • “操作按钮”部分:分为“左侧”和“右侧”,左侧的按钮需自行写在name为tableTopOptionLeft的slot中,右侧的按钮需自行写在name为tableTopOptionRight的slot中。
  • “表格”部分:只需传入表格字段对象,无需重写<el-table>标签。
  • “分页”部分:只需传入导出函数,无需重写<el-pagination>标签。

表格框架页组件用法

// 引入表格框架页组件
import crudForm from "@/components/crudForm/index";
<crud-form ref="crudForm"
    <!-- 表格列名 -->
    :field-list="fieldList" 
     <!-- 导出方法作为属性传入组件 -->
    :exportFn="exportFn" 
    <!-- 查询接口作为属性传入组件 -->
    :api="cx" 
    <!-- 查询参数对象作为属性传入组件 -->
    :queryParam="formInline" >

    <!-- 查询条件区域 -->
    <template slot="searchBar">
        <searchFilter ref="searchFilter" :queryParam="formInline"  />
    </template>

    <!-- 表格上的左侧按钮区域 -->
    <template slot="tableTopOptionLeft">
        <dialogAdd ref="dialogAdd" />
    </template>

    <!-- 表格上的右侧按钮区域 -->
    <template slot="tableTopOptionRight">
        <el-button size="small">批量导入</el-button>
    </template>

    <!-- 表格最后一列:操作列区域 -->
    <template slot="tableOption" slot-scope="{ index, row }">
        <el-button @click="modify(row)" type="text" size="small">修改</el-button>
        <el-button @click="remove(row.id)" type="text" size="small">删除</el-button>
    </template>

</crud-form>
exportdefault {
    data() {
        var formatterName = row => {
            if (row.name == 1) {
                return "国家";
            } else if (row.siteId == 2) {
                return"行业";
            }
        }; 
        return {
            formInline: {},
            fieldList: [
                { name: "日期", value: "date", width: "105" },
                { name: "类型", value: "typeName" },
                { name: "名称", value: "name", formatter: formatterName }
            ]
        }; 
    },
    components:  { crudForm }
};

表格框架页组件参数

参数说明类型可选值默认值
fieldList表格字段Array————
queryParam查询条件对象Object————
api查询接口函数Function————
exportFn分页中的导出函数Function————
showIndex是否显示表格中的“序号”列Booleantrue / falsetrue
showTreeIndex是否显示树形表格中的“序号”列Booleantrue / falsefalse
showCheckbox是否显示表格中的“复选框”列Booleantrue / falsetrue
page是否带分页Booleantrue / falsetrue
fixed列固定在左侧或右侧Stringleft / right——
tableOptionName最后一列显示的列名String——操作
reverseShow针对表格特定数据经行反转操作Booleantrue / falsefalse
levelDown针对表格数据是否存在二级项Booleantrue / falsefalse
tableBorder针对表格对应列可以通过拖动改变宽度Booleantrue / falsefalse
treeProps表格树形控件Object————

表格框架页组件事件

事件名称说明参数
getDataInit查询第一页的表格数据(会自动带上查询条件)——
getMultipleSelection获取表格中多行选中的数据——

fieldList参数

参数说明类型可选值默认值
name列名String————
value接口返回的字段名String————
type列的显示类型Stringlink——
clickFn列的点击事件,只在type="link"时有效Function(row)————
width列宽String————
formatter用来格式化内容Function(row, column, cellValue, index)————
showOverflowTooltip当内容过长被隐藏时显示 tooltipBoolean——false
slotnametemplate插槽名string————

组件代码

/* * @name : 表格框架页组件 * @author : FuYaJuan * @参数 { fieldList : {Array}
表格字段 } 嵌套多级表头 * @参数 { queryParam : {Object} 查询条件对象 } * @参数 {
api : {Function} 查询接口函数 } * @参数 { exportFn : {Function()}
分页中的导出函数 } * @参数 { showIndex : {Boolean} 是否显示序号,默认显示 }*
@参数 { isinput : {Boolean} 是否显示序号,默认显示 } * @参数 { showColumnSetting
: {Boolean} 是否开启动态列设置,默认显示 } * @参数 { showExportBtn : {Boolean}
是否显示导出按钮,默认显示 } * @参数 { showCellClick : {Boolean}
是否开启动态列设置,默认关闭 } * @参数 { showCheckbox : {Boolean}
是否显示复选框, 默认显示 } * @参数 { page : {Boolean} 是否带分页, 默认带分页 }
* @参数 { fixed : {String} 列是否固定在左侧或者右侧,默认右侧 } * @参数 {
tableOptionWidth : {String} 最后一列的宽度 } * * @参数 {uniqueValue : {String}
需要展示input的单行唯一值 } * * @参数 {strategyIdName : {String}
需要展示input的单行唯一值的名字 } * * @参数 {showCheckboxSelect :
{Boolean}是否显示复选框禁止或者不显示 } * @参数 {radioBtn : {Boolean}
数据是否默认选中第一个-单选框 } * @参数 {showRadio : {Boolean}
表格是否显示单选框 } * @参数 {
sortBy:后端翻译的表格字段要在fieldList中加上未翻译之前的字段名,否则会影响后端排序,不需要排序功能的列加上noSort:true
用法示例{ name: "组织机构", value: "orgName" ,sortBy:"orgId", noSort:true}} *
@事件 { getDataInit : {Function()} 重新查询第一页的表格数据 } * @事件 {
handleCurrentChange : {Function()} 重新查询当前页的表格数据 } * @事件 {
getMultipleSelection : {Function()} 获取表格多行选中的数据 } * @事件 {
getTableData : {Function()} 获取完整的table表格数据-tableData } * @version 1.0 *
@edit: 2020/05/20 */
<template>
  <div style="display: flex; flex-direction: column; flex: 1">
    <div
      class="s-o-t-wrap"
      style="display: flex; flex-direction: column; flex: 1"
    >
      <!--查询条件 -->
      <div
        class="search-wrap"
        v-if="searShow"
      >
        <slot name="searchBar" />
      </div>
      <!-- 操作 -->
      <div
        class="table-top-option-wrap"
        v-if="btnShow"
      >
        <div class="left">
          <slot name="tableTopOptionLeft" />
        </div>
        <div class="right">
          <slot name="tableTopOptionRight" />
        </div>
      </div>
      <!-- 表格 -->
      <div
        class="table-wrap"
        id="table-wrap"
        style="display: flex; flex-direction: column; flex: 1"
      >
        <!-- {{ titleName }} -->
        <div
          class="right_title"
          v-if="titleShow"
          style="
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-bottom: 1px;
          "
        >
          <div>
            <slot name="leftTitle" />
          </div>
          <div>
            <slot name="rightTitle" />
          </div>
          <div class="grid-content table-cont">
            <div class="head-text"></div>
            <!-- :tree-props="treeProps" -->
            <el-table
              ref="crudForm"
              :border="tableBorder"
              :data="tableData"
              :header-cell-class-name="cellClass"
              @selection-change="handleSelectionChange"
              @current-change="handleSelectionChange2"
              @sort-change="sortChange"
              @cell-click="cellClick"
              :row-class-name="tableRowClassName"
              header-row-class-name="table-header"
              :cell-class-name="cellcb"
              :cell-style="columnStyle"
              row-key="id"
              :tree-props="treeProps"
              :max-height="tableHeight"
              :radiobtn="radioBtn"
              stripe
              @getTableData="getThisTableData"
            >
              <el-table-column
                v-if="showIndex && showTreeIndex"
                label=""
                type="index"
                width="60"
                align="left"
              >
                <template slot-scope="scope">
                  {{ scope.row.idKey }}
                </template>
              </el-table-column>

              <el-table-column
                v-if="showIndex"
                type="index"
                :sortable="false"
                width="70"
                align="left"
                :index="indexMethod"
              />

              <el-table-column
                width="50"
                v-if="showRadio"
              >
                <template slot-scope="scope">
                  <el-radio
                    v-model="tableRadio"
                    :label="scope.row"
                  >{{
                    `&nbsp;`
                  }}</el-radio>
                </template>
              </el-table-column>

              <el-table-column
                v-if="showCheckbox"
                type="selection"
                width="50"
                :selectable="selecCheckbox"
                align="center"
              />

              <!-- <el-table-column
                v-if="showCheckboxSelect"
                width="45"
                align="center"
              >
                <template v-slot="scope">
                  <el-checkbox
                    v-model="scope.row.isChecke"
                    v-if="
                      scope.row[scope.row['canSelectName']] ==
                      scope.row.canSelectValue
                    "
                    @change="checkTypeBox(scope.row)"
                  ></el-checkbox>
                </template>
              </el-table-column> -->

              <el-table-column
                v-for="(item, index) in fieldList.filter(
                  (item) => !item.hidden
                )"
                :key="index"
                :label="item.name"
                :align="item.clickable ? 'center' : 'left'"
                :width="item.width"
                show="true"
                :v-if="item.show"
                :sortable="false"
                :sort-by="item.sortBy ? item.sortBy : item.value"
                show-tooltip-when-overflow
                :render-header="renderheader"
              >
                <template slot-scope="scope">
                  <el-button
                    class="cursor"
                    v-if="item.type === 'link'"
                    type="text"
                    size="small"
                    @click="item.clickFn(scope.row)"
                  >{{ scope.row[item.value] }}</el-button>

                  <el-button
                    v-else-if="item.type === 'linkvalue'"
                    type="text"
                    size="small"
                    @click="item.clickFn(scope.row)"
                  >
                    {{
                      item.formatter
                        ? item.formatter(scope.row)
                        : scope.row[item.value]
                    }}
                  </el-button>

                  <el-input
                    v-else-if="item.type === 'input'"
                    v-model.trim="scope.row[item.value]"
                    clearable
                    placeholder="请输入"
                    :maxlength="10"
                    style="width: 90%"
                  >
                  </el-input>

                  <!-- 单行input -->
                  <el-input
                    v-else-if="
                      scope.row.isInputshow && item.type === 'aloneInput'
                    "
                    v-model.trim="scope.row[item.value]"
                    clearable
                    placeholder="请输入"
                    :maxlength="10"
                    style="width: 90%"
                  >
                  </el-input>

                  <!-- 键值渲染 -->
                  <template v-else>
                    <span :style="{
                        color: getStatusColor(item, scope.row[item.value]),
                      }">
                      {{
                        item.formatter
                          ? item.formatter(scope.row)
                          : scope.row[item.value]
                      }}
                    </span>
                  </template>
                </template>
              </el-table-column>

              <el-table-column
                :width="Number(tableslotWidth)"
                :label="item.name"
                :v-if="item.slot"
                align="left"
                v-for="(item, index) in fieldList.filter((item) => item.slot)"
                :key="index"
              >
                <template slot-scope="scope">
                  <slot
                    :name="item.slotname"
                    :row="scope.row"
                  />
                </template>
              </el-table-column>

              <el-table-column
                :fixed="fixed"
                :width="tableOptionWidth"
                :label="tableOptionName"
                align="left"
                v-if="showColumnHandle"
              >
                <template slot-scope="scope">
                  <slot
                    name="tableOption"
                    :row="scope.row"
                  />
                </template>
              </el-table-column>

              <!-- 新增的 -->
              <el-table-column
                :fixed="fixed"
                :width="tableOptionWidth"
                :label="tableOptionName1"
                align="left"
                v-if="showColumnHandle1"
              >
                <template slot-scope="scope">
                  <slot
                    name="tableOption1"
                    :row="scope.row"
                  />
                </template>
              </el-table-column>
              <!-- 表头汇总 有序用电方案编制 -->
              <slot name="gradeShowTable" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div
      class="page-wrap-fixed"
      v-if="page"
      id="page-wrap-fixed"
    >
      <el-pagination
        :current-page.sync="queryParam.current"
        :total="listInfo.pageTotal"
        :page-size.sync="queryParam.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        size="small"
        layout="total,prev,slot,pager,next,jumper"
      >
        <el-select
          style="width: 100px"
          :popper-append-to-body="false"
          v-model="Selectsize"
          placeholder="前往"
          size="mini"
          @change="handleSizeChange"
        >
          <el-option
            v-for="item in pageoptions"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
import rightTitle from "./rightTitle.vue";
import { Loading } from "element-ui";
var options = {
  text: "加载中......",
  fullscreen: true,
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.3)",
};
export default {
  name: "CrudForm",
  props: {
    isRowSelect: {
      type: Object,
      default: () => { },
    },
    //是否首屏进入获取table数据
    initapi: {
      type: Boolean,
      default: true,
    },
    tableslotName: {
      type: String,
      default: "",
    },
    tableslotWidth: {
      type: String,
      default: "",
    },
    showtableslot: {
      type: Boolean,
      default: true,
    },
    // 表格字段配置
    fieldList: {
      type: Array,
      default: [],
    },
    // 查询条件
    queryParam: {
      type: Object,
      default: {},
    },
    // 获取数据的接口
    api: {
      type: Function,
      default: () => { },
    },
    // 导出
    exportFn: {
      type: Function,
    },
    // 最后一列显示的列名
    tableOptionName: {
      type: String,
      default: "操作",
    },
    // 最后一列显示的列名
    tableOptionName1: {
      type: String,
      default: "操作",
    },
    // 是否带分页
    page: {
      type: Boolean,
      default: true,
    },
    reverseShow: {
      type: Boolean,
      default: false,
    },
    //table表格层级数据下拉
    levelDown: {
      type: Boolean,
      default: false,
    },
    //table表格表头是否支持拖拽
    tableBorder: {
      type: Boolean,
      default: false,
    },
    // 表格是否显示序号
    showIndex: {
      type: Boolean,
      default: true,
    },
    // 表格是否显示tree序号
    showTreeIndex: {
      type: Boolean,
      default: false,
    },
    // 表格是否显示复选框
    showCheckbox: {
      type: Boolean,
      default: true,
    },
    // 表格是否显示复选框禁止或者不显示
    showCheckboxSelect: {
      type: Boolean,
      default: false,
    },
    // 表格复选框是否禁选
    selecCheckbox: {
      type: Function,
    },
    // 列是否固定在左侧或者右侧
    fixed: {
      type: String,
      default: "right",
    },
    // 最后一列的宽度
    tableOptionWidth: {
      type: Number,
      default: "",
    },
    // 是否开启动态列设置
    showColumnSetting: {
      type: Boolean,
      default: true,
    },
    // 是否显示导出按钮
    showExportBtn: {
      type: Boolean,
      default: true,
    },
    // 是否显示操作列
    showColumnHandle: {
      type: Boolean,
      default: true,
    },
    // 是否显示操作列
    showColumnHandle1: {
      type: Boolean,
      default: false,
    },
    columnNum: {
      type: String,
      default: "6",
    },
    searShow: {
      type: Boolean,
      default: true,
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
    titleShow: {
      type: Boolean,
      default: true,
    },
    //不掉接口的data
    preData: {
      type: Array,
      default: () => [],
    },
    //树性表格
    treeProps: {
      type: Object,
      default: () => { },
    },
    rowKey: {
      type: String,
      default: "",
    },
    // dict show解决分页布局中问题
    dictistrue: {
      type: Boolean,
      default: false,
    },
    getFntrue: {
      type: Boolean,
      default: false,
    },
    // 数据是否默认选中第一个-单选框
    radioBtn: {
      type: Boolean,
      default: false,
    },
    // 表格是否显示单选框
    showRadio: {
      type: Boolean,
      default: false,
    },
    // 默认子组件初始化接口
    inittwo: {
      type: Boolean,
      default: true,
    },
    // 是否需要单行input
    isinput: {
      type: Boolean,
      default: true,
    },
    // 展示input的数据唯一值
    uniqueValue: {
      type: String,
      default: "",
    },
    //数据唯一值的名称
    strategyIdName: {
      type: String,
      default: "",
    },
    //根据状态显示全选按钮
    statusesArr: {
      type: Array,
      default: () => [],
    },
  },
  components: { rightTitle },
  data () {
    return {
      tableHeight: null,
      titleName: "",
      colOptions: [],
      colSelect: [],
      tableData: [],
      // tableSelectList: [], //复选框是否展示相关
      tableRadio: {}, //表格单选相关
      exportData: {
        headers: [],
        values: [],
      },
      multipleSelection: [],
      loading: false,
      listInfo: {
        pageTotal: 0, // 总条数
        pageSizes: [20, 50, 100], // 分页数量列表
        query: {
          // 查询条件
          current: 1, // 当前页
          size: 20, // 每页条数
        },
      },
      prj: {
        projectNum: 0,
        yearIncome: 0,
      },
      pageoptions: [
        { label: "20条/页", value: 20 },
        { label: "50条/页", value: 50 },
        { label: "100条/页", value: 100 },
      ],
      Selectsize: 20,
    };
  },

  created () {
    this.titleName = this.$route.meta.title;
    if (!this.getFntrue) {
      this.initapi && this.api && this.getData(this.api);
    }
  },
  beforeMount () { },
  computed: {
    isSatisfied () {
      if (this.statusesArr.length == "0") {
        return true;
      } else {
        return this.tableData.some((item) =>
          this.statusesArr.includes(item.flowStatus)
        );
      }
    },
  },
  mounted () {
    this.watchSize();
    window.onresize = () => {
      return (() => {
        this.$nextTick(() => {
          this.watchSize();
        });
      })();
    };
    for (let i = 0; i < this.fieldList.length; i++) {
      this.colSelect.push(this.fieldList[i].name);
      if (this.showColumnSetting) {
        if (this.colSelect.length > Number(this.columnNum)) {
          continue;
        }
      }
      this.colOptions.push(this.fieldList[i].name);
    }
  },
  watch: {
    preData (val) {
      this.tableData = val;
    },
    colOptions (colArr) {
      let self = this;
      for (let i in self.fieldList) {
        if (colArr.indexOf(self.fieldList[i].name) === -1) {
          self.fieldList[i].show = false;
        } else {
          self.fieldList[i].show = true;
        }
      }
    },
  },
  beforeUpdate () {
    this.$nextTick(() => {
    });
  },
  methods: {
    cellClass (row) {
      if (!this.isSatisfied) {
        return "disableheadselection";
      }
    },
    //根据状态隐藏复选框
    cellcb (row) {
      if (this.isRowSelect && Object.keys(this.isRowSelect).length > 0) {
        if (this.isRowSelect.list.includes(row.row[this.isRowSelect.flow])) {
          return "myCell";
        }
      }
    },
    getStatusColor (row, status) {
      if (row.colorArr) {
        const colorItem = row.colorArr.find(
          (item) => Object.keys(item)[0] == status
        );
        if (colorItem) {
          return Object.values(colorItem)[0];
        }
        return "#fff";
      }
    },
    getThisTableData () {
      this.$emit("getTableData", this.tableData);
    },
    // 判断复选框是否展示true 显示  反之 ------仅支持根据一个条件进行判断
    statusFlage (fieldList) {
      return fieldList.filter((item) => item.statusName)[0].statusName;
    },
    formatter (index) { },
    watchSize () {
      this.$nextTick(() => {
        if (this.page) {
          let pageWidth = document.getElementById("page-wrap-fixed");
          let tabHead = document.getElementsByClassName("content_right");
          let ontherHead = document.getElementsByClassName("dictManager_list");
          let erd = elementResizeDetectorMaker();
          if (this.dictistrue) {
            erd.listenTo(ontherHead, function (element) {
              pageWidth.style.width = element.offsetWidth + "px";
            });
          } else {
            erd.listenTo(tabHead, function (element) {
              pageWidth.style.width = element.offsetWidth + "px";
            });
          }
          if (document.getElementsByClassName("header-form").length) {
            this.tableHeight =
              window.innerHeight -
              document.getElementsByClassName("header-form")[0].clientHeight -
              document.getElementsByClassName("table-top-option-wrap")[0]
                .clientHeight -
              217 -
              100;
            console.log(this.tableHeight);
          }
        } else {
          if (document.getElementsByClassName("header-form").length) {
            this.tableHeight =
              window.innerHeight -
              document.getElementsByClassName("header-form")[0].clientHeight -
              document.getElementsByClassName("table-top-option-wrap")[0]
                .clientHeight -
              247;
            console.log(this.tableHeight);
          }
        }
      });
    },
    indexMethod (index) {
      let idx = index >= 9 ? index + 1 : "0" + (index + 1);
      return idx;
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    },
    // 分页-刷新
    refresh () {
      this.getData(this.api);
    },
    // 导出
    exportTable () {
      if (!this.tableData.length) {
        this.$message({
          showClose: true,
          message: "列表数据为空,无法导出!",
          type: "warning",
        });
        return;
      }
      this.exportData.headers = [];
      this.exportData.values = [];
      for (let i = 0; i < this.fieldList.length; i++) {
        if (this.fieldList[i].show == true) {
          this.exportData.headers.push(this.fieldList[i].name);
          this.exportData.values.push(this.fieldList[i].value);
        }
      }
      this.exportFn ? this.exportFn() : null;
    },
    // // 复选框选中
    // checkTypeBox (val) {
    //   this.multipleSelection = this.tableData.filter((item) => item.isChecke);
    // },
    // 表格多行选中
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    // 获取表格多行选择的数据
    getMultipleSelection () {
      this.$emit("getMultipleSelection", this.multipleSelection);
      return this.multipleSelection;
    },
    // 表格单行选中
    handleSelectionChange2 (row) {
      this.tableRadio = row;
      this.$emit("getradioSelection", this.tableRadio);
    },
    // 获取表格单行选择的数据
    getradioSelection () {
      return this.tableRadio;
    },
    // 调用接口 获取数据
    getData (api) {
      if (this.preData.length > 0) {
        this.tableData = this.preData;
        return;
      }
      this.loading = Loading.service(options);

      return new Promise((resolve, reject) => {
        api(this.handleParams())
          .then((res) => {
            this.loading && this.loading.close();
            if (
              res.code === "000000" ||
              res.code == "10000" ||
              res.code == 200
            ) {
              if (this.treeProps) {
                this.tableData = this.handleTree(
                  res.data,
                  "orgYear",
                  "parentOrgYear"
                );
                if (this.showTreeIndex) {
                  this.reTableData(this.tableData);
                }
              } else {
                const d = res.data;
                if (d.records) {
                  this.tableData = d.records;
                } else {
                  this.tableData = d;
                }
                if (d.list) {
                  this.tableData = d.list;
                }
                if (this.reverseShow) {
                  d.records.forEach((item) => {
                    item.consNumLoadList.reverse();
                  });
                  this.tableData = d.records;
                }
                if (this.levelDown) {
                  this.tableData = this.handleTree(
                    res.data,
                    "orgYear",
                    "parentOrgYear"
                  );
                }

                this.listInfo.pageTotal = parseInt(d.total);
                this.queryParam.size = d.pageSize || d.size;
                this.queryParam.current = d.pageNum || d.current;
                this.prj = {
                  projectNum: 0,
                  yearIncome: 0,
                };
                if (this.$route.meta.title == "项目收入统计") {
                  this.prj.projectNum += d.projectNum;
                  this.prj.yearIncome += d.yearIncome;
                }
              }
              this.getThisTableData();
              if (this.isinput) {
                // 把所有数据都加上参数isInputshow并且值为false
                this.tableData.forEach((element) => {
                  element["isInputshow"] = false;
                });
                this.tableData = this.tableData;
                // 通过唯一值判断点击行是哪条数据,并且isInputshow 变为true
                for (let i = 0; i < this.tableData.length; i++) {
                  if (
                    this.tableData[i][this.strategyIdName] == this.uniqueValue
                  ) {
                    this.tableData[i].isInputshow = true;
                  }
                }
                this.tableData = this.tableData;
              }
            } else {
              this.$message.error(res.data);
            }
          })
          .catch((err) => {
            this.loading && this.loading.close();
            // this.$message.error("数据加载失败!");
          });
      });
    },
    reTableData (data) {
      data.forEach((v, index) => {
        v.idKey = index + 1 > 9 ? index + 1 : "0" + Number(index + 1);
        if (v.childeLaunchIndex && v.childeLaunchIndex.length > 0) {
          this.reTableData(v.childeLaunchIndex);
        }
      });
      return data;
    },
    //数据处理 chilrden
    handleTree (data, id, parentId, children, rootId) {
      id = id || "id";
      parentId = parentId || "parentId";
      children = children || "children" || "childeLaunchIndex";
      rootId =
        rootId ||
        Math.min.apply(
          Math,
          data.map((item) => {
            return item[parentId];
          })
        ) ||
        0;
      //对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data));

      cloneData.forEach((item) => {
        item.isSelect = false; //添加全选半选状态
      });

      //循环所有项
      const treeData = cloneData.filter((father) => {
        let branchArr = cloneData.filter((child) => {
          //返回每一项的子级数组
          return father[id] == child[parentId]; //筛选子一级的数组
        });
        branchArr.length > 0 ? (father.children = branchArr) : "";
        //返回第一层
        return father[parentId] == rootId;
      });
      // console.log(treeData)
      return treeData != "" ? treeData : data;
    },
    // 重新查询第一页的表格数据
    getDataInit () {
      this.queryParam.current = 1;
      this.getData(this.api);
      this.$emit("getDataInit");
    },
    // 处理接口调用所需的参数
    handleParams () {
      const obj = {};
      for (const key in this.queryParam) {
        obj[key] = this.queryParam[key];
      }
      return { ...this.listInfo.query, ...obj };
    },
    // pageSize 改变时会触发
    handleSizeChange (val) {
      const query = this.queryParam;
      query.size = val; // 每页条数
      query.current = 1; // 每页条数切换,重置当前页
      this.getData(this.api);
    },
    // currentPage 改变时会触发
    handleCurrentChange (val) {
      this.queryParam.current = val; // 当前页
      this.getData(this.api);
    },
    // 列排序
    sortChange (column) {
      if (column.order === "ascending") {
        this.queryParam.order = "asc";
      } else {
        this.queryParam.order = "desc";
      }
      this.getData(this.api);
    },
    // 设置点击列样式
    columnStyle (row, column, rowIndex, columnIndex) {
      if (row.column.align == "is-center") {
        return "color: #23a4a4; cursor: pointer;";
      } else {
        return "";
      }
    },
    // 表格点击事件
    cellClick (row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
    //表头换行
    renderheader (h, { column, $index }) {
      return h("div", { style: { padding: '0' } }, [
        h("div", { style: { display: 'block', lineHeight: '16px', padding: '0' } }, column.label.split(",")[0]),
        h("div", { style: { display: 'block', lineHeight: '18px', textAlign: 'center', padding: '0' } }, column.label.split(",")[1]),
      ]);
    },
  },
};
</script>
<style>
.el-loading-mask {
  min-width: 100%;
  height: 98%;
}
</style>

<style lang="scss" scoped>
@import "@/styles/elementInitStyles/element-variables.scss";

.search-wrap {
  // @include background_color("el-form-bg");
}

/deep/ .el-table tr {
  height: 40px;
}

.s-o-t-wrap {
  // margin-bottom: 45px;
}

.search-wrap {
  // padding: 18px 12px 8px;
  /deep/ button {
    // width: 90px;
    // height: 30px;
    // border-radius: 3px;
  }

  /deep/ .search-box {
    padding: 20px;
  }
}

.right_title {
  // @include background_color("table-top-title");
  @include font_color("table-top-title-color");
  width: 100%;
  // height: 40px;
  // line-height: 40px;
  font-size: 16px;
  // padding: 0 30px;
  /* background-color: #374492; */
  // @include background_color("table-top-title");
  @include font_color("table-top-title-color");
  color: #fff;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: -10px;
  font-size: 14px;
  // min-height: 400px;
}

.search-wrap /deep/ .el-form--inline .el-form-item {
  // margin-bottom: 10px;
  margin-right: 20px;

  .el-form-item__label {
    display: inline-block;
    // width: 70px;
    text-align: right;
    padding-right: 10px;
    line-height: 30px;
  }

  .el-form-item__content {
    line-height: 30px;
  }

  .el-input {
    width: 180px;
  }

  button {
    margin-top: 0;
  }
}

.table-top-option-wrap {
  margin: 20px 20px 4px;
  overflow: hidden;

  .left {
    float: left;

    /deep/ .el-button--primary {
      // width: 148px;
      // height: 32px;
      border-radius: 2px;
    }
  }

  .right {
    float: right;

    /deep/ .el-button {
      width: 150px;
      height: 32px;
      border-radius: 2px;
    }
  }
}

.table-wrap {
  .el-table th {
    padding: 2px 0;
  }
}

.table-wrap /deep/ .table-header {
  // background-color: #f1f1f1;
  color: #ffffff;
  font-weight: bold;

  th {
    // background-color: #2a377b;
  }
}

.table-wrap /deep/ .table-body-td {
  padding: 3px 0;
}

//头部标题
.grid-content {
  flex: 1;
  border-radius: 0 !important;
  //   border-radius: 8px;
  // height: 100%;
  // margin: 15px 15px 0 0;
  margin: 15px 20px 0 20px;
  padding: 20px 20px;
  // @include background_color("content-box-bg");
  @include btbacnimg("titgroundimg"); //md样式
  position: relative; //md样式
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  .head-text {
    display: flex;
    justify-content: space-between;
    font-size: 14px !important;
    font-weight: normal;
    // border-top-right-radius: 8px;
    // border-top-left-radius: 8px;
    // @include border_color4("content-box-border");//下边框加粗
    @include background_color("table-top-title");

    .header-title {
      font-size: 14px !important;
      font-weight: normal;
      padding: 0 20px;
      min-height: 46px;
      flex: 7;
      display: flex;
      align-items: center;
      width: 100%;
      @include background_color("table-top-title");
      @include font_color("table-top-title-color");
      box-sizing: border-box;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;

      .head-icon {
        height: 16px;
        width: 4px;
        border-radius: 4px;
        background-color: #00ccff;
        margin-right: 14px;
      }
    }
  }

  //md样式
  .head-text::before {
    content: "";
    width: 60px;
    height: 80px;
    @include btbacnimg("tit3groundimg");
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    right: 1px;
  }
  /deep/.el-table tr th:first-child > .cell {
    padding-left: 0px !important;
  }
}

//md样式
.grid-content::before {
  content: "";
  width: 50%;
  height: 30px;
  @include btbacnimg("tit1groundimg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: -14px;
  right: 0;
}

//md样式
.grid-content::after {
  content: "";
  width: 60px;
  height: 80px;
  @include btbacnimg("tit2groundimg");
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 1px;
}

/deep/.el-form-item--medium {
  margin-top: 2px;
  padding-right: 25px;
}
.cursor {
  text-decoration: underline;
  cursor: pointer;
  color: rgb(0, 186, 198) !important;
}
/deep/.el-pagination {
  display: flex !important;
  align-items: center !important;
}
/deep/ .el-table--border,
.el-table--group {
  border: 0px solid #ccc !important;
}
/deep/.myCell .el-checkbox__input {
  display: none;
}
/deep/ .disableheadselection > .cell .el-checkbox__inner {
  display: none;
}
</style>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值