elemeentui el-table封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了elemeentui el-table封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elemeentui el-table封装文章来源地址https://www.toymoban.com/news/detail-804747.html

<template>
  <div style="height: 100%;">
    <el-table ref="sneTable"  
    element-loading-text="加载中" 
    element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(45,47,79, 0.8)" 
      :border="border" 
      :stripe="stripe" 
      :height="height"
      :max-height="maxHeight" 
      :size="size" 
      :row-key="rowKey" 
      :data="dataSource" 
      style="width: 99%;font-size: 14px "
      :default-expand-all="isExpandAll" 
      :tree-props="treeProps" 
      :span-method="onSpanMethod"
      @current-change="currentRowChange" 
      @selection-change="selectionChange" 
      @row-click="rowClick"
      @sort-change="sortChange">
      <div slot="empty" class="relative">
        <empty />
      </div>
      <el-table-column v-if="selector" reserve-selection fixed="left" type="selection" header-align="center"
        align="center" width="50" :selectable="checkSelectTable" />
      <el-table-column v-if="index" align="center" fixed="left" type="index" label="序号" width="50"></el-table-column>
      <template v-for="(column, i) in columns">
        <el-table-column v-if="isShow(column)" :key="i" :prop="column.prop" :label="column.label" :width="column.width"
          :min-width="column.minWidth" :sortable="column.sortable || false" :align="column.align || 'left'"
          :fixed="column.fixed" :show-overflow-tooltip="showTooltip">
          <template #default="{ row }">
            <span v-if="!column.slotName">
              {{
                row[column.prop] || row[column.prop] === 0
                ? row[column.prop]
                : "--"
              }}
            </span>
            <slot v-else :name="column.slotName" :data="row" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script setup>
const props = defineProps({
  // 加载
  loading: { type: Boolean, default: false },
  // 是否带边框
  border: { type: Boolean, default: false },
  // 是否带斑马纹
  stripe: { type: Boolean, default: false },
  // 是否有序号
  index: { type: Boolean, default: true },
  // 表格高度 不传默认是计算后的高度
  height: { type: [Number, String], default: null },
  // 表格最大高度
  maxHeight: { type: Number, default: null },
  // 表格大小
  size: { type: String, default: "small" },
  // 唯一标识
  rowKey: { type: String, default: null },
  // 表数据
  dataSource: { type: Array, default: () => [] },
  // 是否多选
  selector: { type: Boolean, default: false },

  // 表头
  columns: { type: [String, Object, Array], required: true },
  // 是否展开
  isExpandAll: { type: Boolean, default: false },
  // 渲染嵌套数据的配置选项
  treeProps: {
    type: Object,
    default: () => { }
  },
  small: { type: Boolean, default: false },
  showTooltip: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits()
function sortChange({ column, prop, order }) {
  emit("sortChange", { column, prop, order });
}
function onSpanMethod({ rowIndex, columnIndex }) {
  let obj = { rowspan: 1, colspan: 1 };
  emit("onSpanMethod", { rowIndex, columnIndex }, val => {
    obj = val;
  });
  return obj;
}
function isShow(c) {
  return c.show === undefined ? true : c.show;
}
// 当前行变化
function currentRowChange(row) {
  if (row) emit("currentRowChange", row);
}

// 多选
function selectionChange(values) {
  emit("selection-change", values);
}

// 设置多选框(数据增加selectionIsSelect字段，判断当前是否可勾选)
function checkSelectTable(row) {
  return row.selectionIsSelect !== undefined ? row.selectionIsSelect : true;
}
// 点击某一行
function rowClick(row) {
  if (row) emit("row-click", row);
}
</script>

父使用

  <sne-table ref="sRef" :loading="loading" :selector="true" size="mini" row-key="id" height="calc( 100% - 140px )"
         :data-source="noticeList" :columns="columns" @selection-change="handleSelectionChange">
          <template #noticeType="{data}">
            <dict-tag :options="sys_notice_type" :value="data.noticeType" />
          </template>
          <template #status="{ data }">
            <dict-tag :options="sys_notice_status" :value="data.status" />
         </template>
         <template #createTime="{ data }">
            <span>{{ parseTime(data.createTime, '{y}-{m}-{d}') }}</span>
         </template>
         <template #operate="{ data }">
            <el-button  link type="primary" :icon="EditPen" @click="handleUpdate(data)">修改</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(data)" v-hasPermi="['system:notice:remove']">删除</el-button>
         </template>
      </sne-table>

elemeentuiPlus el-table封装 vue3

<template>
  <div style="height: 100%;">
    <!-- element-loading-text="加载中" 
    element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(45,47,79, 0.8)"  -->
    <el-table ref="sneTable"  
      :data="dataSource" 
     
      :row-key="rowKey"
      v-loading="loading"
      :default-expand-all="isExpandAll" 
      :tree-props="treeProps" 
      :border="border" 
      :stripe="stripe" 
      :height="height"
      :max-height="maxHeight" 
      size="default" 
      @row-click="rowClick"
      @selection-change="selectionChange" 
      @sort-change="sortChange"
      @current-change="currentRowChange" 
      :span-method="onSpanMethod"
      style="width: 99%;font-size: 14px ">
      <el-table-column v-if="selector" reserve-selection fixed="left" type="selection" header-align="center"
        align="center" width="50" :selectable="checkSelectTable" />
        <el-table-column v-if="index" align="center" fixed="left" type="index" label="序号" width="50"></el-table-column>
        <template  v-for="(column, i) in columns">
        <el-table-column  v-if="isShow(column)" :prop="column.prop" :label="column.label" :width="column.width"
          :min-width="column.minWidth" :sortable="column.sortable || false" :align="column.align || 'left'"
          :fixed="column.fixed" :show-overflow-tooltip="showTooltip">
          <template #default="{ row }">
            <span v-if="!column.slotName">
            {{ row[column.prop] ||  row[column.prop] === 0? row[column.prop] :'' }}</span>
            <slot :name="column.slotName" :data="row" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script setup>
const props = defineProps({
  // 是否带边框
  border: { type: Boolean, default: false },
  // 是否带斑马纹
  stripe: { type: Boolean, default: false },
  // 是否有序号
  index: { type: Boolean, default: true },
  // 表格高度 不传默认是计算后的高度
  height: { type: [Number, String], default: null },
  // 表格最大高度
  maxHeight: { type: Number, default: null },
  // 表格大小
  size: { type: String, default: "large" },
    // 表数据
    dataSource: {type: Array,default: () => []},
     // 加载
    loading: {type: Boolean, default: false},
      // 表头
    columns: { type: [String, Object, Array], required: true },
    // 是否显示tooltip
    showTooltip: {type: Boolean,default: true},
      // 是否多选
  selector: { type: Boolean, default: false },
  // 唯一标识
  rowKey: { type: String, default: null },
    // 是否展开
    isExpandAll: { type: Boolean, default: false },
  // 渲染嵌套数据的配置选项
  treeProps: { type: Object, default: () => { }},
})
const emit = defineEmits()

function onSpanMethod({ rowIndex, columnIndex }) {
  // let obj = { rowspan: 1, colspan: 1 };
  // emit("onSpanMethod", { rowIndex, columnIndex }, val => {obj = val;});
  // return obj;
}
function isShow(c) {
  return c.show === undefined ? true : c.show;
}
// 当前行变化
function currentRowChange(row) {
  // if (row) emit("currentRowChange", row);
}
function sortChange({ column, prop, order }) {
  // emit("sortChange", { column, prop, order });
}
// 多选
function selectionChange(values) {
  emit("selection-change", values);
}

// 设置多选框(数据增加selectionIsSelect字段，判断当前是否可勾选)
function checkSelectTable(row) {
  return row.selectionIsSelect !== undefined ? row.selectionIsSelect : true;
}
// // 点击某一行
function rowClick(row) {
  // if (row) emit("row-click", row);
}
</script>

到了这里，关于elemeentui el-table封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！