yos_web/src/components/dynamic-table/index1.vue

<template>
  <div>
    <!-- :header-cell-style="{background:'#EEEEEE',color:'#333'}" -->
    <el-table
      ref="table"
      :row-class-name="tableClassName"
      highlight-current-row
      :data="data"
      size="mini"
      :height="height"
      @row-click="rowClick"
      style="width:100%;"
      :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
      :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
      border
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="35" fixed v-if="checkbox"></el-table-column>
      <el-table-column
        v-for="(col,index) in layout"
        :key="col.tablecolid"
        :prop="col.columnname"
        :label="col.title"
        :min-width="tool.calcTableColWidth($refs.table,layout,index)"
        :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?redirect ? redirect : 'right' :false : false"
      >
        <template v-slot:header="{ column,$index }" v-if="customHeader">
          <slot name="header" :data="column"></slot>
        </template>
        <template slot-scope="scope">
          <div class="table-panel">
            <!-- 自定义表格显示内容 -->
            <slot
              v-if="custom"
              name="customcol"
              :column="{data:scope.row,columnname:col.columnname}"
            ></slot>
            <!-- 否则就是默认 -->
            <span v-else>{{scope.row[col.columnname]}}</span>
            <!-- 操作结构内容 -->
            <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  /*
    layout:表结构数据;
    data:表渲染数据;
    custom:是否启用自定义结构;
    opwidth:操作列宽度
  */
  props: [
    "layout",
    "data",
    "custom",
    "height",
    "fixedName",
    "width",
    "checkbox",
    "redirect",
    "customHeader",
  ],
  data() {
    return {
      list: [],
    };
  },
  computed: {
    ...mapGetters({
      loading: "loading",
    }),
  },
  methods: {
    rowClick(row) {
      this.$emit("rowClick", row);
    },
    tableClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    selectionChange(row) {
      this.$emit("selectionChange", row);
    },
  },
  mounted() {},
};
</script>
<style>
</style>