日常记录#6参数表格

最新推荐文章于 2024-09-06 22:20:29 发布

王丁丁丁

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量71

点赞数

分类专栏： js 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_43376355/article/details/128640652

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该段代码展示了一个Vue.js组件，用于创建带有动态列的表格。组件接受`tableData`和`propsArr`作为属性，分别用于表格数据和列定义。列定义可以包含类型、属性、标签、样式等信息，支持自定义渲染函数来处理单元格内容。当列定义或表格数据改变时，会自动调整表格布局。

摘要由CSDN通过智能技术生成

<template>
  <div class="table-wrap">
    <el-table ref="display-table" :data="tableData" border style="width: 100%; font-size: 12px;">
      <el-table-column v-for="(column, index) in propsArr" :key="index"
        :type="(column.type && ['index', 'selection', 'expand'].includes(column.type)) ? column.type : null"
        :prop="column.prop" :label="column.label"
        :show-overflow-tooltip="[true, false].includes(column.toolTip) ? column.toolTip : true"
        :align="column.align ? column.align : 'center'" :width="column.width ? column.width : 'auto'">
        <template v-if="!(column.type && ['index', 'selection', 'expand'].includes(column.type))" v-slot="scope">
          <span v-if="column.render" :style="column.style ? column.style : {}">
            {{ renderHtml(column, scope) }}
            <slot :name="'renderHtml'" />
          </span>
          <span v-else :style="column.style ? column.style : {}">{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableDisplayProp',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    propsArr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  watch: {
    propsArr: {
      handler() {
        this.$refs?.['display-table']?.doLayout()
      },
      deep: true
    },
    tableData(nv) {
    }
  },
  created() {
  },
  methods: {
    renderHtml(col, scope) {
      if (typeof col.render === 'function') {
        // 执行函数，动态生成VNode传入具名插槽renderHtml中
        this.$slots['renderHtml'] = col.render(this.$createElement, scope)
      }
      return null
    }
  }
}
</script>