自己写了一个组件,希望能封装成为通用的组件,在父组件使用它时,通过父组件提供的数据源能够渲染对应的数据,从而实现组件复用的效果?

作者站长头像
站长
· 阅读数 7

这是写好的子组件:

<template> 
<div class="wrapper center-table">
    <!-- 循环遍历数组中每一项 -->
    <el-row v-for="(item, index) in list" :key="index" class="table-col">
      <el-col v-for="(item2, index2) in item" :key="index2" :span="24 / item.length" class="table-item">
        <span class="label">{{ item2.title }}</span>
        <span class="value">{{ item2.value }}</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [
        [{ title: '工站', value: 'OP_03' }],
        [{ title: 'SN', value: '11111111' }, { title: 'Time', value: '11:22' }],
        [{ title: 'Result', value: 'OK/NG' }],
        [{ title: 'Name', value: '' }, { title: 'Key', value: '' }]
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  border: solid 1px #eaf2f8;
  height: 40px;

  .table-col:not(:last-child) {
    border-bottom: solid 1px #eaf2f8;
  }

  .table-item:not(:last-child) {
    border-right: solid 1px #eaf2f8;
  }

  .table-col {
    height: 100%;
    display: flex;
  }

  .table-item {
    height: 100%;
    display: flex;

    >div {
      display: flex;
    }

    .label {
      display: flex;
      align-items: center;
      width: 50%;
      // text-align: left;
      background: #f2f9fc;
      color: #666;
      // padding: 8px 12px;
    }

    .value {
      display: flex;
      width: 50%;
      align-items: center;
      word-wrap: break-word;
      color: #222;
      font-size: 14px;
      // padding: 8px 12px;
      flex: 1;
    }

    :deep(.center-table td),
    :deep(.center-table th) {
      text-align: center !important;
    }
  }
}

在父组件中引入子组件后,怎样把数据渲染过去并展示出内容

回复
1个回答
avatar
test
2024-07-01
<template>
  <div>
    <your-component-name :list="parentList"></your-component-name>
  </div>
</template>

<script>
import YourComponentName from './YourComponentName.vue' // 导入你的子组件

export default {
  components: {
    'your-component-name': YourComponentName 
  },
  data() {
    return {

      parentList: [
        [{ title: '工站', value: 'OP_03' }],
        [{ title: 'SN', value: '11111111' }, { title: 'Time', value: '11:22' }],
        [{ title: 'Result', value: 'OK/NG' }],
        [{ title: 'Name', value: '' }, { title: 'Key', value: '' }]
      ]
    }
  }
}
</script>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容