elementPlus tables表格的二次封装

小前端

已于 2024-02-27 16:14:11 修改

阅读量319

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2024-02-22 09:29:55 首次发布

本文链接：https://blog.csdn.net/weixin_45041493/article/details/136224723

版权

文章介绍了如何在Vue项目中使用ElementUI的el-table组件，包括自定义列配置、动态渲染和处理多层级属性的选择。

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

<el-table :data="tableData" :max-height="maxHeight"  :min-height="minHeight"  @select="handleSelect" @select-all="handleSelectAll">
	<el-table-column v-if="isCheck" type="selection" width="55" align="center" ></el-table-column>
	<el-table-column :prop="item.prop" :label="item.label" v-for="item in columnData" :key="item.id" :width="item.width"
      :fixed="item.fixed" align="center" >
      <template v-slot="{ row }">
        <slot :name="item.prop" :row="row" v-if="!item.visable" >
          {{ getProp(row, item) }}
        </slot>
      </template>
    </el-table-column>
    <template v-slot:empty>
      <el-empty description="暂无数据"></el-empty>
    </template>
</el-table>

export default {
  name: "Tables",
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    columnData: {
      type: Array,
    },
    tableLoading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    isCheck: {
      type: Boolean,
      default() {
        return false;
      },
    },
    handleSelect: {
      type: Function,
    },
    handleSelectAll: {
      type: Function,
    },
    isStripe: {
      type: Boolean,
      default() {
        return false;
      },
    },
    maxHeight: {
      type: String
    },
    minHeight: {
      type: String
    },
    height: {
      type: String
    }
  },
  data() {
    return {};
  },
  methods: {
    // 处理传递的属性名是xxx[x].xxx （只能链选一层）
    getProp(row, item) {
      let reg = /^(.+)\[(\d+)\]\.?(.*)$/;
      let matched = item.prop.match(reg);
      if (matched) {
        let arr = row[matched[1]];
        let prop = arr[matched[2]];
        let prop2 = prop[matched[3]];
        return prop2;
      }
      return row[item.prop];
    },
  },
 
};
</script>