element-ui el-table中根据按钮的数量动态计算是否需要展示更多

element-ui el-table中根据按钮的数量动态计算是否需要展示更多

buttonGroup.vue组件

<template>
  <div>
    <el-button v-for="item in list" :key="item.label" type="text" @click="btnClick(item.row,item.funcMethod)">{{ item.label }}</el-button>
    <el-dropdown v-if="extraList.length>0">
      <el-button type="text">
        更多<i class="el-icon-arrow-down el-icon--right" />
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in extraList" :key="item.label" @click.native="btnClick(item.row,item.funcMethod)">{{ item.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  props: {
    btnGroup: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      btnNumber: 3,	//默认显示3个
      list: [],
      extraList: []
    }
  },
  watch: {
    btnGroup: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length) {
          const result = val.filter(item => {
          //此块是根据isShow判断是否显示隐藏，并且如果还有根据权限控制，自己掌控可以修改。
            return (
              (item.isShow == undefined || item.isShow) &&
              this.checkPermission(item.permission)
            );
          })
          if (result.length === this.btnNumber) {
            this.list = result.slice(0, this.btnNumber)
            this.extraList = []
          } else if (result.length >= this.btnNumber + 1) {
            this.list = result.slice(0, this.btnNumber - 1)
            this.extraList = result.slice(this.btnNumber - 1)
          } else {
            this.list = result
            this.extraList = []
          }
        }
      }
    }
  },
  methods: {
    btnClick(row, funcMethod) {
      this.$emit('clickTableBtn', { row, funcMethod })
    }
  }
}
</script>
<style lang="scss">
.el-button + .el-dropdown{
    margin-left: 7px;
}
</style>

#tablePage.vue 列表页面

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="250"
  >
    <el-table-column
      fixed
      prop="date"
      label="日期"
    />
    <el-table-column
      prop="name"
      label="姓名"
    />
    <el-table-column
      prop="province"
      label="省份"
    />
    <el-table-column
      prop="city"
      label="市区"
      width="120"
    />
    <el-table-column
      prop="address"
      label="地址"
    />
    <el-table-column
      prop="zip"
      label="邮编"
    />
    <el-table-column
      fixed="right"
      label="操作"
      :width="minWidth"
    >
      <template slot-scope="{row}">
        <buttonGroup
          :btn-group="dealGroup(row)"
          @clickTableBtn="clickTableBtn"
        />
   
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
import buttonGroup from './buttonGroup.vue'  //可以写成公共组件，自己看着处理
export default {
  components: {
    buttonGroup
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getDataList()
  },
  mounted() {
 
  },
  methods: {
     dealGroup(row) {
      return [
        {
          'label': '确认装货',
          'permission':'auth:onlineFreight:cofirmfreight',
          'type': 'text',
          'isShow':row.state == 1 && !row.transType,
          'row': row,
          'funcMethod': 'confirmFreight'
        },
        {
          'label': '确认卸货',
          'permission':'auth:onlineFreight:limit',
          'isShow':row.state == 2 && !row.transType,
          'row': row,
          'funcMethod': 'limit'
        },
        {
          'label': '重新卸货',
          'permission':'auth:onlineFreight:again',
          'isShow':row.state == 4 && !row.transType,
          'row': row,
          'funcMethod': 'againUnload'
        },
        {
          'label': '原始数据',
          'isShow':true,
          'permission':'auth:onlineFreight:originalData',
          'row': row,
          'funcMethod': 'handleDetail'
        },
        {
          'label': '变更记录',
          'row': row,
          'permission':'auth:onlineFreight:changeRecord',
          'funcMethod': 'handleRecord'
        },
        {
          'label': '还款记录',
          'row': row,
          'funcMethod':'huankuanRecord',
          'permission':'auth:onlineFreight:repayrecord'
        },
      ]
    },
  },
    confirmFreight(row) {
      console.log('confirmFreight', row)
    },
    limit(row) {
      console.log('limit', row)
    },
    againUnload(row) {
      console.log('againUnload', row)
    },
    handleDetail(row) {
      console.log('handleDetail', row)
    },
    //按钮点击方法
    clickTableBtn(data) {
      this[data.funcMethod](data.row)
    },
  }
}
</script>

如果给您带来方便，麻烦一键三连 谢谢！！