<!-- Element UI -->
<el-table-column prop="date" label="日期" min-width="150"></el-table-column>
<el-table-column prop="name" label="姓名" width="200"></el-table-column>
<el-table-column prop="province" label="省份" width="200"></el-table-column>

<!-- and-design for vue -->
 cols: [
    { title: '日期',dataIndex: 'date',key: 'date', minWidth: 150 },
    { title: '姓名',dataIndex: 'name',key: 'name', width: 200 },
    { title: '省份',dataIndex: 'province',key: 'province', width: 200 },
],

<template>
    <colgroup>
        <col
         v-for="(item, index) in columns"
         :key="`table-tr-${index}`"
         :name="`table_tr_${index}`"
         :width="`${item.width}px`"
         />
    </colgroup>
</template>

/** Table 實例 */
const bpTable = ref(null);

/** 最終用于渲染的 columns 表頭列表 */
const columns = ref([]);

/** 表格所占的實際寬度 px */
const _table_width = ref("");

/** 在沒有設(shè)定寬度時，可用于撐開剩余寬度的列數(shù) */
let _remainder_col = 0;

/** 固定寬度（包含自定義的寬和最小寬的總和） */
let _fixed_width = 0;

/** 各列最小寬度數(shù)組 */
let _min_width_list = [];

/** 表格各列寬度數(shù)組 */
let _col_width_list = [];

/** 單列最小寬度 */
const _min_column_width = 80;

/**
 * 初始化表頭列表
 * @returns Array
 */
const initColumns = () => {
    const el = bpTable.value;
    const { cols } = props;

    /** 每次需要初始化的一些值 */
    _fixed_width = 0;
    _remainder_col = cols.length;
    _min_width_list = [];

    // 1. 處理含有固定寬度和最小寬的列

    // 2. 獲取各列寬度，并組成一個數(shù)組

        // 計算需要自適應(yīng)的列寬度

    // 3. 輸出 columns
}

for (let i = 0; i < cols.length; i++) {
    const { width, minWidth } = cols[i];

    if (width) {
            _fixed_width += Number(width);
            _remainder_col--;
    }
    minWidth && _min_width_list.push(minWidth)
}

/**
 * 獲取各列寬度，并組成一個數(shù)組
 * @returns Array width_list
 */
function getWidthList() {
    const { cols } = props;
    /** 各列寬度數(shù)組 */
    let width_list = [];
    /** 自適應(yīng)列寬 */
    let adapt_width = getAdaptWidth();
    /**
    * 當(dāng)表格中含有設(shè)置最小寬度的列時，需要挨個比較自適應(yīng)寬是否小于最小寬度
    * 如果小于，則重新設(shè)置各個值并重新計算自適應(yīng)寬度
    */
    if (_min_width_list.length) {
        _min_width_list.map((item, index) => {
            if (adapt_width > item) {
                _fixed_width += item;
                _remainder_col--;
                _min_width_list.splice(index, 1);
                adapt_width = getAdaptWidth();
            }
        });
    }

    for (let i = 0; i < cols.length; i++) {
        const { width, minWidth } = cols[i];

        // 設(shè)置成固定寬度
        if (width) { width_list.push(width); continue; }

        // 是否設(shè)置成最小寬度：當(dāng)含有最小寬度屬性并且最小寬度大于計算得出的最大列寬
        const hasMinWidth = minWidth && minWidth > adapt_width;
        if (hasMinWidth) { width_list.push(minWidth); continue; }

        // 如果沒有定義寬度和最小寬，則設(shè)置成自適應(yīng)寬度或者最小預(yù)設(shè)寬度
        width_list.push(adapt_width < _min_column_width ? _min_column_width : adapt_width);
    }
    return width_list;
}

/**
    * 根據(jù)表格實際寬度、已固定的列寬、以及剩余自適應(yīng)列數(shù)，計算得出自適應(yīng)列寬
    * @returns Number width
    */
    function getAdaptWidth() {
    let width = (_table_width.value - _fixed_width) / _remainder_col;
    return Number(width).toFixed(2);
    }
    ```
    #### 完整代碼
    ```javascript
    /**
    * 獲取各列寬度，并組成一個數(shù)組
    * @returns Array width_list
    */
    function getWidthList() {
    const { cols } = props;

    /** 各列寬度數(shù)組 */
    let width_list = [];

    /** 自適應(yīng)列寬 */
    let adapt_width = getAdaptWidth();

    /**
     * 當(dāng)表格中含有設(shè)置最小寬度的列時，需要挨個比較自適應(yīng)寬是否小于最小寬度
     * 如果小于，則重新設(shè)置各個值并重新計算自適應(yīng)寬度
     */
    if (_min_width_list.length) {
      _min_width_list.map((item, index) => {
        if (adapt_width > item) {
          _fixed_width += item;
          _remainder_col--;
          _min_width_list.splice(index, 1);
          adapt_width = getAdaptWidth();
        }
      });
    }

    for (let i = 0; i < cols.length; i++) {
      const { width, minWidth } = cols[i];

      // 設(shè)置成固定寬度
      if (width) { width_list.push(width); continue; }

      // 是否設(shè)置成最小寬度：當(dāng)含有最小寬度屬性并且最小寬度大于計算得出的最大列寬
      const hasMinWidth = minWidth && minWidth > adapt_width;
      if (hasMinWidth) { width_list.push(minWidth); continue; }

      // 如果沒有定義寬度和最小寬，則設(shè)置成自適應(yīng)寬度或者最小預(yù)設(shè)寬度
      width_list.push(adapt_width < _min_column_width ? _min_column_width : adapt_width);
    }
    return width_list;
    }

  watch(() => props.cols, () => { initColumns() });

  onMounted(() => {
    nextTick(() => {
      initColumns();
      on(window, 'resize', throttle(() => initColumns(), 400));
    });
  });
  onBeforeUnmount(() => off(window, 'resize', () => initColumns()));