关于view-design的table组件宽度自适应的二次封装

<template>
  <Table
    class="i-table"
    v-bind="$attrs"
    v-on="$listeners"
    ref="itable"
    :columns="columnss"
    :loading="loading"
    :data="data"
  >
    <template
      v-for="item in columnss"
      slot-scope="{ row, index }"
      :slot="item.slot"
    >
      <slot :name="item.slot" :row="row" :index="index"></slot>
    </template>
  </Table>
</template>
<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    autoWidth: {
      type: Boolean,
      default: () => false
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    data: {
      type: Array,
      default: () => []
    },
    maxWidth: {
      type: Number,
      default: () => 1000
    }
  },
  data() {
    return {
      columnss: JSON.parse(JSON.stringify(this.columns)),
      timer: true
    }
  },
  methods: {
    // 重新设置table列的宽度
    async setColumnsWidth() {
      // 异常情况不能导致内存泄露
      try {
        let list = JSON.parse(JSON.stringify(this.columns))
        const tableDom = this.$refs.itable.$el
        for (let i = 0; i < list.length; i++) {
          const item = list[i]
          if ((!item.width || item.setAutoWidth) && this.autoWidth) {
            item.minWidth = this.maxWidth
            item.width = this.maxWidth
            item.setAutoWidth = true
          }
        }
        this.columnss = list
        if (!this.autoWidth) return
        await this.$nextTick()
        for (let i = 0; i < this.columnss.length; i++) {
          const item = this.columnss[i]
          // 若单列的autoWidth=false或本身设置了width则不遍历
          if (!item.width || item.setAutoWidth) {
            // item.__id 为组件内部生成的列随机id，非深拷贝此处能直接取到值
            const header = tableDom.querySelector(
              `th.ivu-table-column-${item.__id}`
            )
            const headerInner = header.querySelector('.ivu-table-cell')
            let width = headerInner.clientWidth

            const column = tableDom.querySelectorAll(
              `td.ivu-table-column-${item.__id}`
            )
            for (let j = 0; j < column.length; j++) {
              const item1 = column[j]
              const item1Inner = item1.querySelector('.ivu-table-cell')
              item1Inner.style.display = 'inline-block'
              if (item1Inner.clientWidth > width) width = item1Inner.clientWidth
              item1Inner.style.display = 'block'
            }
            item.minWidth = width + 4
            item.width = 0
          }
        }
      } catch (error) {}
    },
    // 重新渲染的时机
    async nextTickFn() {
      if (!this.timer) return
      this.timer = false
      await this.setColumnsWidth()
      this.timer = true
    },
  },
  watch: {
    data: {
      handler(newVal, oldData) {
        this.nextTickFn()
      },
      deep: true
    },
    columns: {
      handler(newVal) {
        this.nextTickFn()
      },
      deep: true
    }
  },
  mounted() {
    this.nextTickFn()
  }
}
</script>
<style lang="scss">
.i-table {
  .ivu-table-cell {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}
</style>

使用方式：

<ITable
        :auto-width="true"
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-select-all="selectAllClick"
        @on-select="seleckClick"
        @on-select-all-cancel="selectAllCancel"
        @on-select-cancel="selectCancel"
      >
        <template slot="handler" slot-scope="{ row }">
          <Button type="primary" icon="md-create" @click="editRow(row, index)"
            >修改</Button
          >
        </template>
      </ITable>
    </div>

data--------------
columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          type: 'index',
          minWidth: 80,
          align: 'center'
        },
        {
          title: '文件id',
          key: 'photo_id',
          minWidth: 80,
          align: 'center',
          show: true
        },
        {
          title: '文件预览',
          slot: 'photo_show',
          minWidth: 80,
          align: 'center',
          show: true
        },

        {
          title: '文件类型',
          minWidth: 80,
          key: 'photo_type',
          align: 'center',
       
        {
          title: '操作',
          slot: 'handler',
          fixed: 'right',
          minWidth: 80,
          align: 'center',
          show: true
        }
      ],
data:[],
loading:false


methods--------------
    // 点击全选触发
    selectAllClick(items) {
      console.log(items, 123456)
     
    },
    // 点击取消全选触发
    selectAllCancel(items) {
      
    },
    // 点击选择触发
    seleckClick(items, row) {


    },
    // 点击取消某一项
    selectCancel(items, row) {

    },

elementui也可根据同理进行二次改造；

若是有用，帮忙微信扫一下小程序增加访客，而且还可下载4k高清免费头像壁纸；