前端那些事20240201-前端那些事-avue2 操作栏配置 操作栏自适应

avue-crud :data="data"
            :option="option">
  <template #menu="{size}">
    <el-button v-for="(item,index) in 5"
                :key="index"
                :size="size"
                type="text">操作{{index+1}}</el-button>
  </template>
</avue-crud>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        menuWidth: 0,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },
  mounted () {
    this.setMenuWidth()
  },
  methods: {
    setMenuWidth () {
      setTimeout(() => {
        let width = 0;
        let list = document.querySelectorAll('.avue-crud__menu');
        list.forEach(ele => {
          let childList = ele.children
          let allWidth = 0;
          for (let i = 0; i < childList.length; i++) {
            const child = childList[i]
            allWidth += child.offsetWidth + 18
          }
          if (allWidth >= width) width = allWidth
        })
        this.option.menuWidth = width
      })
    }
  }
}
</script>

运行结果