<commit_before><template>
  <div :class="tableCls">
    <div class="h-table-header" :style="{'padding-right': (scrollWidth+'px')}">
      <table :style="{'margin-left': (-scrollLeft+'px')}">
        <colgroup>
          <col v-if="checkbox" width="60" />
          <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
        </colgroup>
        <tr>
          <th v-if="checkbox" class="text-center">
            <Checkbox v-if="fixedColumnLeft.length==0" :indeterminate="checks.length>0&&checks.length<datas.length" :checked="checks.length == datas.length" @click.native="checkAll"></Checkbox>
          </th>
          <slot v-if="!columns.length" ></slot>
          <template v-else>
            <th v-for="c of computeColumns" :key="c" :class="{[`text-${c.align}`]: !!c.align}">{{c.title}}</th>
          </template>
        </tr>
      </table>
      <div class="h-table-fixed-cover" :style="{'width': (scrollWidth+'px')}"></div>
    </div>
    <div class="h-table-container">
      <div class="h-table-content-empty" v-height="height" v-if="datas.length == 0">
        <slot name='empty'></slot>
        <div v-if="!$slots.empty">暂无数据</div>
      </div>
      <div class="h-table-body" v-show="datas.length" :style="bodyStyle">
        <table>
          <colgroup>
            <col v-if="checkbox" width="60" />
            <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
          </colgroup>
          <tbody class="h-table-tbody">
            <template v-for="(d, index) of datas">
              <TableTr :datas="d" :key="d" :index="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                <td v-if="checkbox" class="text-center">
                  <Checkbox v-if="fixedColumnLeft.length==0" v-model="checks" :value="d"></Checkbox>
                </td>
                <slot :data="d" v-if="$scopedSlots.default"></slot>
              </TableTr>
            </template>
          </tbody>
        </table>
      </div>
  
      <div v-if="fixedColumnLeft.length" class="h-table-fixed-left" v-width="leftWidth" :style="bodyStyle">
        <table :style="{'margin-top': (-scrollTop+'px')}" v-width="tableWidth">
          <colgroup>
            <col v-if="checkbox" width="60" />
            <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
          </colgroup>
          <tbody class="h-table-tbody">
            <template v-for="(d, index) of datas">
              <TableTr :datas="d" :key="d" :index="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                <td v-if="checkbox" class="text-center">
                <Checkbox v-model="checks" :value="d"></Checkbox>
                </td>
                <slot :data="d" v-if="$scopedSlots.default"></slot>
              </TableTr>
            </template>
          </tbody>
        </table>
      </div>
      <div v-if="fixedColumnRight.length" class="h-table-fixed-right" v-width="rightWidth" :style="{'margin-right': (scrollWidth+'px'), 'height': (height+'px')}">
        <table :style="{'margin-top': (-scrollTop+'px')}" v-width="tableWidth">
          <colgroup>
            <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
          </colgroup>
          <tbody class="h-table-tbody">
            <template v-for="(d, index) of datas">
              <TableTr :datas="d" :key="d" :index="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                <slot :data="d" v-if="$scopedSlots.default"></slot>
              </TableTr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
    <div v-if="fixedColumnLeft.length" class="h-table-fixed-header-left">
      <table v-width="leftWidth">
        <colgroup>
          <col v-if="checkbox" width="60" />
          <col v-for="c of fixedColumnLeft" :width="getWidth(c)" :key="c" />
        </colgroup>
        <tr>
          <th v-if="checkbox" class="text-center">
            <Checkbox :indeterminate="checks.length>0&&checks.length<datas.length" :checked="checks.length == datas.length" @click.native="checkAll"></Checkbox>
          </th>
          <th v-for="c of fixedColumnLeft" :key="c.title" :class="{[`text-${c.align}`]: !!c.align}">{{c.title}}</th>
        </tr>
      </table>
    </div>
    <div v-if="fixedColumnRight.length" :style="{'margin-right': (scrollWidth+'px')}" class="h-table-fixed-header-right">
      <table v-width="rightWidth">
        <colgroup>
          <col v-for="c of fixedColumnRight" :width="getWidth(c)" :key="c.title" />
        </colgroup>
        <tr>
          <th v-for="c of fixedColumnRight" :key="c.title" :class="{[`text-${c.align}`]: !!c.align}">{{c.title}}</th>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import utils from '../../utils/utils';
import TableTr from './table-tr';

const prefix = 'h-table';

export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    datas: {
      type: Array,
      default: () => []
    },
    border: {
      type: Boolean,
      default: false
    },
    height: Number,
    checkbox: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scrollWidth: 0,
      scrollLeft: 0,
      scrollTop: 0,
      checks: [],
      hoveredTr: null,
      leftWidth: 0,
      rightWidth: 0,
      tableWidth: 400,
      computeColumns: []
    };
  },
  watch: {
    datas: {
      handler(value, oldValue) {
        if (this.height || this.fixedColumnLeft.length || this.fixedColumnRight.length) {
          this.resize();
        }
        if (value != oldValue) {
          this.checks.splice(0, this.checks.length);
        }
      },
      deep: true
    },
    columns: {
      handler() {<commit_msg>fix: table column 变化没有watch<commit_after><template>
  <div :class="tableCls">
    <div class="h-table-header" :style="{'padding-right': (scrollWidth+'px')}">
      <table :style="{'margin-left': (-scrollLeft+'px')}">
        <colgroup>
          <col v-if="checkbox" width="60" />
          <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
        </colgroup>
        <tr>
          <th v-if="checkbox" class="text-center">
            <Checkbox v-if="fixedColumnLeft.length==0" :indeterminate="checks.length>0&&checks.length<datas.length" :checked="checks.length == datas.length" @click.native="checkAll"></Checkbox>
          </th>
          <slot v-if="!columns.length" ></slot>
          <template v-else>
            <th v-for="c of computeColumns" :key="c" :class="{[`text-${c.align}`]: !!c.align}">{{c.title}}</th>
          </template>
        </tr>
      </table>
      <div class="h-table-fixed-cover" :style="{'width': (scrollWidth+'px')}"></div>
    </div>
    <div class="h-table-container">
      <div class="h-table-content-empty" v-height="height" v-if="datas.length == 0">
        <slot name='empty'></slot>
        <div v-if="!$slots.empty">暂无数据</div>
      </div>
      <div class="h-table-body" v-show="datas.length" :style="bodyStyle">
        <table>
          <colgroup>
            <col v-if="checkbox" width="60" />
            <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
          </colgroup>
          <tbody class="h-table-tbody">
            <template v-for="(d, index) of datas">
              <TableTr :datas="d" :key="d" :index="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                <td v-if="checkbox" class="text-center">
                  <Checkbox v-if="fixedColumnLeft.length==0" v-model="checks" :value="d"></Checkbox>
                </td>
                <slot :data="d" v-if="$scopedSlots.default"></slot>
              </TableTr>
            </template>
          </tbody>
        </table>
      </div>
  
      <div v-if="fixedColumnLeft.length" class="h-table-fixed-left" v-width="leftWidth" :style="bodyStyle">
        <table :style="{'margin-top': (-scrollTop+'px')}" v-width="tableWidth">
          <colgroup>
            <col v-if="checkbox" width="60" />
            <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
          </colgroup>
          <tbody class="h-table-tbody">
            <template v-for="(d, index) of datas">
              <TableTr :datas="d" :key="d" :index="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                <td v-if="checkbox" class="text-center">
                <Checkbox v-model="checks" :value="d"></Checkbox>
                </td>
                <slot :data="d" v-if="$scopedSlots.default"></slot>
              </TableTr>
            </template>
          </tbody>
        </table>
      </div>
      <div v-if="fixedColumnRight.length" class="h-table-fixed-right" v-width="rightWidth" :style="{'margin-right': (scrollWidth+'px'), 'height': (height+'px')}">
        <table :style="{'margin-top': (-scrollTop+'px')}" v-width="tableWidth">
          <colgroup>
            <col v-for="c of computeColumns" :width="getWidth(c)" :key="c" />
          </colgroup>
          <tbody class="h-table-tbody">
            <template v-for="(d, index) of datas">
              <TableTr :datas="d" :key="d" :index="index" :class="{'h-table-tr-selected': checks.indexOf(d)>-1}">
                <slot :data="d" v-if="$scopedSlots.default"></slot>
              </TableTr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
    <div v-if="fixedColumnLeft.length" class="h-table-fixed-header-left">
      <table v-width="leftWidth">
        <colgroup>
          <col v-if="checkbox" width="60" />
          <col v-for="c of fixedColumnLeft" :width="getWidth(c)" :key="c" />
        </colgroup>
        <tr>
          <th v-if="checkbox" class="text-center">
            <Checkbox :indeterminate="checks.length>0&&checks.length<datas.length" :checked="checks.length == datas.length" @click.native="checkAll"></Checkbox>
          </th>
          <th v-for="c of fixedColumnLeft" :key="c.title" :class="{[`text-${c.align}`]: !!c.align}">{{c.title}}</th>
        </tr>
      </table>
    </div>
    <div v-if="fixedColumnRight.length" :style="{'margin-right': (scrollWidth+'px')}" class="h-table-fixed-header-right">
      <table v-width="rightWidth">
        <colgroup>
          <col v-for="c of fixedColumnRight" :width="getWidth(c)" :key="c.title" />
        </colgroup>
        <tr>
          <th v-for="c of fixedColumnRight" :key="c.title" :class="{[`text-${c.align}`]: !!c.align}">{{c.title}}</th>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import utils from '../../utils/utils';
import TableTr from './table-tr';

const prefix = 'h-table';

export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    datas: {
      type: Array,
      default: () => []
    },
    border: {
      type: Boolean,
      default: false
    },
    height: Number,
    checkbox: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scrollWidth: 0,
      scrollLeft: 0,
      scrollTop: 0,
      checks: [],
      hoveredTr: null,
      leftWidth: 0,
      rightWidth: 0,
      tableWidth: 400,
      computeColumns: []
    };
  },
  watch: {
    datas: {
      handler(value, oldValue) {
        if (this.height || this.fixedColumnLeft.length || this.fixedColumnRight.length) {
          this.resize();
        }
        if (value != oldValue) {
          this.checks.splice(0, this.checks.length);
        }
      },
      deep: true
    },
    columns: {
      handler() {
        this.initColumns();
{'fraction_non_alphanumeric': 0.20355120946989191, 'fraction_numerical': 0.004288900325956425, 'mean_word_length': 2.1716539717083787, 'pattern_counts': {'":': 0, '<': 241, '<?xml version=': 0, '>': 251, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1531268', 'n_tokens_mistral': 3945, 'n_tokens_neox': 3870, 'n_words': 682}