peisweb/src/components/compTable.vue

<template>
  <el-table
    :data="tableData"
    size="medium"
    fit
    :header-cell-style="{
      height: '40px',
      padding: '0',
      background: '#f7f9fa',
      'font-size': '16px',
      color: '#8590a6',
    }"
    ref="multipleTable"
    @sort-change="handleSort"
    highlight-current-row
    @filter-change="filterHandler"
    @row-click="handleRowClick"
  >
    <el-table-column
      v-for="(th, key) in tableHeader"
      :key="key"
      :prop="th.prop"
      :label="th.label"
      :fixed="th.fixed"
      :sortable="th.sortable ? 'custom' : false"
      :filters="th.filters"
      :column-key="th.columnKey"
      :filtered-value="th.filteredValue"
      :filter-multiple="th.filterMultiple"
      :min-width="th.minWidth"
    >
      <template slot-scope="scope">
        <ex-slot
          v-if="th.render"
          :render="th.render"
          :row="scope.row"
          :index="scope.$index"
          :column="th"
        />

        <span v-else>{{ scope.row[th.prop] || "" }}</span>
      </template>
      <template>
        <el-tag
          class="move"
          style="cursor: move; margin-left: 15px"
          draggable="true"
        >
          <i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i>
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null,
    },
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index,
    };
    if (data.props.column) params.column = data.props.column;
    return data.props.render(h, params);
  },
};
export default {
  name: "comp-table",
  components: { exSlot },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 表头数据
    tableHeader: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    // 排序事件
    handleSort(sort) {
      this.$emit("sort-events", sort);
    },
    // 筛选事件
    filterHandler(filters) {
      this.$emit("filter-events", filters);
    },
    // 某一行被点击
    handleRowClick(row) {
      // 点击选中是的颜色改变我给你看文档吧?  你这不是可以是的但是那个我用封装的就不行那边那个
      // 你封装的那个js文件在哪里没有JS就是封装成组件调用
      // 你现在是哪里不行  现在效果不是出来了?是的row可以传递过去拿的到你点击列表看看
      // 你看我点击了哪个row那边传过去了 然后呢就选中效果没显示这一个问题背景没变

      this.$refs.multipleTable.setCurrentRow(row);
      // multipleTable.
      console.log("row", row);
      this.$emit("clickevents", row);
    },
  },
};
</script>