在vue-elementui中使用el-table,当type="selection"的时候,分页数据进行不同页跳转选择 需要这种功能的时候我们需要在el-table的标签上为每个el-table-column都创建一个id;所以就用到 了row-key="id"这个属性;然后我们就需要在el-table-column为type="selection"添加一个属性 reserve-selection;当这两个属性同时使...
在el-table-column 上需根据不同 v-if 条件来控制列显隐时,就会出现列数据展示错乱的情况(要么 A 列的数据显示在 B 列上,或者后端返回有数据的但是显示的为空),如下所示。 <template> <div> <el-table :data="tableData" border size="mini" style="width: 100%"> <el-table-column prop="date" l...
1<el-table-columnv-if="activeName === 'three' "key="1">金额数</el-table-column>2<el-table-columnv-if="activeName === 'first' "key="2">订单数</el-table-column> 给使用了v-if的列,加一个固定的key值,这样子不会存在此问题了。 或者这样子也是可以的 1<el-table-columnv-if="active...
会错乱的写法: <el-table-columnprop="wait_day"label="等待审批天数"v-if="status==0"><templateslot-scope="scope"><span>{{(scope.row.wait_day + "(天)")}}</span></template></el-table-column><el-table-columnv-if="status==1"prop="valid_day"label="有效日期"></el-table-column><...
<el-table-columnv-if="type === '0' ":key="Math.random()">姓名</el-table-column><el-table-columnv-if="type === '1' ":key="Math.random()">年龄</el-table-column> 1. 2. 说明: 给使用了v-if的列,加一个固定的key值,或循环渲染key即可; ...
解决方案也是多种尝试后才找出来的,试过el-table-column 加 key;也试过动态隐藏展示的列由v-if改为v-show,多级表格时修改嵌套关系等等都不行。 最后发现el-table 也动态控制展示与隐藏式是可以解决错乱问题的,于是在el-table上加上了v-if,如下代码所示: <el-table v-if="!loading.table" ref="table" v...
activeName) }, activated() { if (this.refreshTable) { this.getTableData(this.activeName) this.$store.dispatch('setRefreshTable', '') }, methods: { getTableData(activeName) { switch (activeName) { case '1':this.$refs.zhiDuiFillIn.getTableData() break case '2':this.$refs.wait...
activeName) }, activated() { if (this.refreshTable) { this.getTableData(this.activeName) this.$store.dispatch('setRefreshTable', '') }, methods: { getTableData(activeName) { switch (activeName) { case '1':this.$refs.zhiDuiFillIn.getTableData() break case '2':this.$refs.wait...
这个问题可能是由于table组件的高度是计算得出的,而v-if切换时会导致table组件重新渲染,从而导致高度异常。 解决方法是使用table组件自带的`doLayout()`方法,在切换到第二个table时,调用此方法即可让高度正常。你可以将此方法绑定到v-if切换后的事件上,例如: ```html <template> <div> <button @click="show...