自定义九宫格样式，需要用户传递一个列数，来显示九宫格一行显示几列

<template>
  <div class="panel-container"
    :style="{'--column-num':props.columnNum}">
    <template v-if="list.length>0">
      <template v-for="(item,index) in list" :key="index">
        <div class="panel-item">
          <div class="panel-item-num">{{item[defaulConfig.num]}}</div>
          <div class="panel-item-text">{{item[defaulConfig.text]}}</div>
        </div>
      </template>
    </template>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { deepAssign } from '@/utils'
const props = defineProps({
  columnNum: {
    type: Number,
    default: () => 2
  },
  defaultProps: {
    type: Object,
    default: () => {}
  }
})
const defaulConfig = ref({
  num: 'num',
  text: 'text'
})
defaulConfig.value = deepAssign(defaulConfig.value, props.defaultProps)

const list = ref([])
const setData = (data = []) => {
  list.value = data
}
defineExpose({
  setData
})
</script>
<style lang="scss" scoped>
  .panel-container{
    background: #fff;
    border-radius: 6px;
    padding:20px;
    @include flexLayout($vertical:center,$horizontal:flex-start,$wrap:wrap);
    .panel-item{
      width:calc(100%/var(--column-num));
    }
  }
</style>