spfm-market-front/src/components/el-forms.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 === "文件标题") {
          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>