spfm-market-front/src/components/el-formid.vue

<template>
    <div>
      <slot :name="list.name"></slot>
      <el-table
        ref="table"
        style="width: 100%"
        :data="list.data"
        :height="list.height + 'px'"
        :max-height="list.height + 'px'"
        @row-click="getRowData"
        @selection-change="selectionChange"
        empty-text="暂无数据"
        @cell-click="getRowList"
        :cell-style="columnbackgroundStyle"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- 是否多选 -->
        <el-table-column
          v-if="list.isSelection"
          :selecttable="list"
          type="selection"
          :width="list.width || 50"
          align="center"
        />
  
        <!-- 是否需要序号 -->
        <el-table-column
          v-if="list.isIndex"
          type="index"
          label="序号"
          width="55"
          align="center"
        />
        <template v-for="item in list.titledata">
          <el-table-column
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
            show-overflow-tooltip
            :width="item.width || 100"
          />
        </template>
        <!-- 操作列 -->
        <el-table-column
          v-if="list.isOperation"
          v-bind="list.data && list.data.length ? { fixed: 'right' } : null"
          style="margin-right: 20px"
          class-name="handle-td"
          label-class-name="tc"
          :label="list.operation.label"
          align="center"
        >
          <!-- UI统一一排放3个，4个以上出现更多 -->
          <template slot-scope="scope">
            <!-- 三个一排的情况，去掉隐藏的按钮后的长度 -->
            <template v-if="list.operation.data.length > 0">
              <div class="btn">
                <div v-for="item in list.operation.data" :key="item.label">
                  <template v-if="item.type !== 'icon'">
                    <el-button
                      v-bind="item"
                      :type="item.type ? item.type : ''"
                      size="mini"
                      @click.native.prevent="
                        item.handleRow(scope.$index, scope.row, item.label)
                      "
                    >
                      {{ item.label }}
                    </el-button>
                  </template>
                  <template v-else>
                    <i
                      :class="[icon, item.icon]"
                      v-bind="item"
                      @click="item.handleRow(scope.$index, scope.row, item.label)"
                    />
                  </template>
                </div>
              </div>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          style="display: flex; flex-direction: row-reverse"
          v-if="list.pageData.total > 0"
          :current-page.sync="page"
          :page-sizes="
            list.pageData.pageSizes ? list.pageData.pageSizes : [5, 10, 15, 20]
          "
          :page-size="list.pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.pageData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
       page:1
      }
    },
    props: {
      //  表格数据和表格部分属性的对象
      // eslint-disable-next-line vue/require-default-prop
      list: {
        type: Object,
      },
    },
    created() {
  
    },
    methods: {
      columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
        if (column.type == "default") {
          if (column.label === "文件标题"||column.label === "待办事项名称") {
            return "color:#0682CD;";
          }
        }
      },
      selectionChange(val) {
  
        //多选数字回调
        this.$emit("num", val);
      },
      handleAdd(name) {
       
        this.$emit("toolMsg", name);
      },
      handleRow(index, row, lable) {
       
      },
      handleSizeChange(val) {
        this.$emit("changeSize", val);
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.$emit("changeNum", val);
        console.log(`当前页: ${val}`);
      },
      // 点击行即可选中
      getRowData(row) {
        this.$refs.table.toggleRowSelection(row);
      },
      getRowList(row, column, event, cell) {
        this.$emit("clickDemand", column.label, row);
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .btn{
    display: flex;
    justify-content: center;
  }
  </style>