Vue封装组件-表格展示数据-LjTable1

最新推荐文章于 2024-07-06 01:35:56 发布

疆~

最新推荐文章于 2024-07-06 01:35:56 发布

阅读量296

点赞数

分类专栏： Vue2

本文链接：https://blog.csdn.net/qq_40323256/article/details/119542998

版权

Vue.js 自定义组件数据展示样式定制属性数据

关键词由CSDN通过智能技术生成

Vue2 专栏收录该内容

196 篇文章 59 订阅

订阅专栏

效果图：

使用：

<template>
  <div>
        <LjTable1
          :tableData="tableData"
          labelColor="#1DCBF3"
          valueColor="white"
          borderColor="#1DCBF3"
        ></LjTable1>
  </div>
</template>
 
<script>
import LjTable1 from "@/components/LjTable1/index.vue";

export default {
  components: {
    LjTable1,
  },
  data() {
    return {
      properties: {
        name: "标题",
        area: "",
        circumference: 100,
        treeType: "桃树",
        treeNumber: 50,
        soilType: "xxx",
        harvest: 100,
        estimatedOutputValue: 100,
        growthValue: 100,
        economicBenefits: 100,
        status: true,
        note: "",
      },
    };
  },
  computed: {
    tableData() {
      return [
        {
          label: "面积",
          value: this.properties.area,
        },
        {
          label: "周长",
          value: this.properties.circumference,
        },
        {
          label: "果树品种",
          value: this.properties.treeType,
        },
        {
          label: "果树数量",
          value: this.properties.treeNumber,
        },
        {
          label: "土壤类型",
          value: this.properties.soilType,
        },
        {
          label: "产量",
          value: this.properties.harvest,
        },
        {
          label: "预估产值",
          value: this.properties.estimatedOutputValue,
        },
        {
          label: "长势值",
          value: this.properties.growthValue,
        },
        {
          label: "经济效益",
          value: this.properties.economicBenefits,
        },
        {
          label: "状态",
          value: this.properties.status,
        },
      ];
    },
  },
};
</script>

LjTabel1:

<!--LjTable1-->
<template>
  <div class="LjTable1">
    <p
      v-for="(item, index) in tableData"
      :key="index"
      :style="{
        borderColor: borderColor,
      }"
    >
      <span :style="{ color: labelColor }">{{ item.label }}</span
      >：<strong :style="{ color: valueColor }" style="float: right">{{
        item.value
      }}</strong>
    </p>
  </div>
</template>

<script>
export default {
  name: "LjTable1",
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    borderColor: {
      type: String,
      default: "white",
    },
    labelColor: {
      type: String,
      default: "#1dcbf3",
    },
    valueColor: {
      type: String,
      default: "white",
    },
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.LjTable1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  p {
    border-width: 1px;
    border-style: solid;
    line-height: 40px;
    padding: 0 7px;
  }
}
</style>