vue2 element ui 表格封装---分页---show-overflow-tooltip宽度控制

表格封装插槽的使用

父组件：

 子组件：

完整代码

子组件

<template>
  <!-- 子组件 -->
  <div class="home">
    <el-table
      ref="multipleTable"
      :header-cell-style="{ backgroundColor: '#f5f5f5' }"
      :header-cell-class-name="cellClass"
      :data="
        paging
          ? tableData.slice(
              (query.pageIndex - 1) * query.pageSize,
              query.pageIndex * query.pageSize
            )
          : tableData
      "
      style="width: 100%"
      :height="data.height"
      @select="checkbox"
      @row-click="rowclick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" v-if="data.checkbox">
      </el-table-column>
      <template v-for="(column, index) in columns">
        <el-table-column
          label="序号"
          width="50"
          align="center"
          v-if="column.label == '序号'"
          :key="index"
        >
          <template slot-scope="scope">
            <span
              >{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}
            </span>
          </template>
        </el-table-column>
        <!--自定义作用域插槽-->
        <template v-else-if="column.slotName">
          <el-table-column
            :label="column.label"
            :width="column.width"
            :align="column.center"
            #default="scope"
            :key="index"
          >
            <slot :name="column.slotName" :param="scope"></slot>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :class-name="column.className ? column.className : ''"
            :formatter="column.formatter || undefined"
            :prop="column.prop"
            :label="column.label"
            :width="column.width || ''"
            align="left"
            :key="index"
            show-overflow-tooltip
          >
          </el-table-column>
        </template>
      </template>

      <template slot="empty" v-if="tableData.length == 0">
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="query.pageIndex"
        :page-size="query.pageSize"
        :page-sizes="pageSizes"
        layout="total, sizes,prev, pager, next"
        :total="paging ? tableData.length : query.pageTotal"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // pageIndex：当前多少页
      // pageSize：当前显示多少页
      // total：总数
      // checkbox: true, //开启选择
      // checkboxmultiple: true, //是否多选---默认true--是  false--否
      query: this.data.query || { pageIndex: 1, pageSize: 10 },
      columns: this.data.columns || [],
      tableData: this.data.tableData || [],
      pageSizes: this.data.pageSizes || [10, 25, 30, 50], //每页显示个数选择器的选项设置
      paging: this.data.paging || false, //前端分页
    };
  },
  methods: {
    handleSelectionChange(e) {
      if (this.data.checkboxmultiple) {
        this.$emit("checkbox", e);
      }
    },
    // 当前页数
    handleCurrentChange(pageIndex) {
      this.query.pageIndex = pageIndex;
      this.$emit("page", this.query);
    },
    //当前显示多少页
    handleSizeChange(pageSize) {
      this.query.pageIndex = 1;
      this.query.pageSize = pageSize;
      this.$emit("page", this.query);
    },
    // 多选
    checkbox(selection, row) {
      if (this.data.checkboxmultiple) {
        this.$emit("checkbox", selection);
      } else {
        this.$refs.multipleTable.clearSelection();
        if (selection.length === 0) {
          return;
        }
        this.$refs.multipleTable.toggleRowSelection(row, true);
        this.$emit("checkbox", [row]);
      }
    },
    // 点击一行触发的事件
    rowclick(val) {
      this.$emit("rowclick", val);
    },
    // 单选--隐藏全选按钮
    cellClass() {
      if (!this.data.checkboxmultiple) {
        return "disableheadselection";
      } else {
        return "disableheadselection1";
      }
    },
  },
  mounted() {},
  watch: {
    "data.tableData": {
      handler(newVal, oldval) {
        this.tableData = newVal;
      },
    },
    deep: true,
    immediate: true,
  },
};
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
}

.pagination {
  width: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: flex-end;
}

.el-tooltip__popper {
  max-width: 20% !important;
}

.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 20px;
}
.disableheadselection > .cell .el-checkbox__inner {
  display: none;
}
.disableheadselection1 > .cell .el-checkbox__inner {
  display: flex;
}
</style>

父组件

<template>
  <!-- 调用完整实例 -->
  <div>
    <div id="pdf" class="op">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动区域" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="koo">
      <Table
        v-loading="loading"
        :data.sync="table"
        @page="getPage"
        @checkbox="checkbox"
        @rowclick="rowclick"
      >
        <template #date="{ param }">
          行数据-- {{ param.row.date }},key--{{ param.$index }}
        </template>
        <template #address="{ param }">
          行数据-- {{ param.row.address }},key--{{ param.$index }}
        </template>
      </Table>
    </div>
    <el-button type="primary" @click="bdf()">主要按钮</el-button>
  </div>
</template>

<script>
import Table from "@/components/Table";
import { htmltopdf } from "@/utils/htmltopdf";
export default {
  components: {
    Table,
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      //大表单
      table: {
        checkbox: true, //开启选择
        checkboxmultiple: false, //是否多选---默认true--是  false--否
        height: 400, //表格高度
        paging: false, //前端分页
        pageSizes: [5, 10, 15, 20], //分页数值配置---有默认参数
        query: {
          pageIndex: 1,
          pageSize: 10,
          pageTotal: 20,
        },
        columns: [
          { label: "序号" },
          {
            label: "名称",
            prop: "name",
            width: "150",
            // formatter---实例
            formatter: (row) => {
              if (row.level === "1") {
                return "高风险地区";
              } else {
                return "低风险地区";
              }
            },
          },
          {
            label: "时间",
            prop: "date",
            slotName: "date", //---slotName实例
          },
          {
            label: "地址",
            prop: "address",
            slotName: "address", //---slotName实例
          },
        ],
        tableData: [
          {
            date: "2016-05-02",
            name: "111111111111111111111111111111111111111111111111111111111111111111111111",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      },
    };
  },
  methods: {
    download(e) {
      console.log(e, 11);
    },
    bdf() {
      htmltopdf("#pdf", "测试");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          setTimeout(() => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.loading = false;
          }, 2000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //大表单--分页参数--请根据接口返回赋值
    getPage(value) {
      this.table.query.pageIndex = value.pageIndex;
      this.table.query.pageSize = value.pageSize;
      console.log(value);
    },
    // 多选
    checkbox(val) {
      console.log(val);
    },
    // 点击行触发事件
    rowclick(val) {
      console.log(val);
    },
  },
};
</script>
<style scoped>
.button {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.mian {
  width: 100%;
  height: 500px;
}
</style>