HaierUI Plus

Appearance

Return to top
On this page

common-table 表格（齐思博）

表格组件：基础信息，状态标签，行拖拽，操作列，自定义右上角列筛选，自定义slot，支持其他所有element-ui表格配置项。

基础用法

tableConfig、modelValue属性必填，分别对应表格配置项和表格数据。可快捷配置部分常用内容。
<template>
  <div>
    <h-common-table v-model="tableData" :tableConfig="tableConfig" @fnSortEnd="fnSortEnd">
      <template #user="scope">
        <div>{{ scope.row.updateDate }} + {{ scope.index }}</div>
      </template>
      <template #label01="scope02">
				<div>{{ scope02.column.label }}-自定义{{ scope02.index }}</div>
			</template>
    </h-common-table>
  </div>
</template>
<script setup>
import {
  reactive,
  toRefs
} from 'vue';
const data = reactive({
  tableData: [], // 表格数据
  tableConfig: [
    {
      label: '音乐信息',
      width: '400',
      infoConfig: {
        titleKey: 'mcName',
        idKey: 'mcId',
        idLabel: '音乐id',
        showLength: 10,
        imgKey: 'imgLink'
      }
    },
    {
      label: '状态',
      customLabel: {
        name: 'label01'
      },
      width: '200',
      tagConfig: {
        tagKey: 'mcState',
        filter: {
          '0': {
            type: 'danger',
            name: '已禁用'
          },
          '1': {
            type: 'success',
            name: '已启用'
          }
        }
      }
    },
    {
      label: '自定义slot',
      width: '200',
      customSlot: {
        name: 'user'
      }
    },
    {
      label: '更新时间',
      prop: 'updateDate',
      'show-overflow-tooltip': true
    },
    {
      label: '更新人',
      prop: 'updateUser',
      lineClamp: 2,
    }
  ]  
});
const {
  tableData,
  tableConfig
} = toRefs(data);
const fnalert = (row) => {
  console.log(row);
}
data.tableData = [{
  "mcId" : "95286",
  "mcName" : "豆浆油条豆浆油条豆浆油条豆浆油条",
  "mcCategoryLabel" : [ "背景音乐" ],
  "mcVip" : "1",
  "mcPower" : "1",
  "mcWeight" : 3,
  "mcState" : "1",
  "updateUser" : "曹云芳",
  "updateDate" : "2023-03-09 15:54:43",
  "buttonList": [{ btnName: '试听', cb: fnalert }, { btnName: '试听1', cb: fnalert }]
}, {
  "mcId" : "177685",
  "mcName" : "金枝欲孽 咏叹调",
  "mcCategoryLabel" : null,
  "mcVip" : "0",
  "mcPower" : "0",
  "mcWeight" : 1,
  "mcState" : "0",
  "updateUser" : "曹云曹云芳曹云芳曹云芳芳",
  "updateDate" : "2023-03-09 10:26:04",
  "imgLink" : "https://resource.haigeek.com:443/download/resource/selfService/hardware/modeltypeimg/32922e2d1d2540f69cf3a71006f560ae.png",
  "buttonList": []
}, {
  "mcId" : "177685",
  "mcName" : "asdfa",
  "mcCategoryLabel" : null,
  "mcVip" : "0",
  "mcPower" : "0",
  "mcWeight" : 1,
  "mcState" : "0",
  "updateUser" : "曹wwe",
  "updateDate" : "2023-03-09 10:26:04",
  "imgLink" : "https://resource.haigeek.com:443/download/resource/selfService/hardware/modeltypeimg/32922e2d1d2540f69cf3a71006f560ae.png",
  "buttonList": []
}]
</script>

增加操作列及列筛选按钮

增加表格操作列以及右上角列筛选项，支持自定义slot。
<template>
  <div>
    <h-common-table v-model="tableData" :tableConfig="tableConfig" @fnSortEnd="fnSortEnd">
      <template #user="scope">
        <div>{{ scope.row.updateDate }} + {{ scope.index }}</div>
      </template>
    </h-common-table>
  </div>
</template>
<script setup>
import {
  reactive,
  toRefs
} from 'vue';
const data = reactive({
tableData: [], // 表格数据
tableConfig: [
  {
    label: '自定义slot',
    width: '200',
    filterInfo: {
      check: false
    },
    customSlot: {
      name: 'user'
    }
  },
  {
    label: '更新时间',
    prop: 'updateDate',
    filterInfo: {
      check: true
    }
  },
  {
    label: '更新人',
    prop: 'updateUser',
    lineClamp: 2,
    filterInfo: {
      check: true
    },
  },
  {
    label: '操作',
    fixed: 'right',
    minWidth: '200px',
    operationConfig: {
      showNum: 3,
      showLastDrag: true
    }
  }
]});
const {
  tableData,
  tableConfig
} = toRefs(data);
const fnalert = (row) => {
  console.log(row);
}
data.tableData = [{
  "mcId" : "95286",
  "mcName" : "豆浆油条豆浆油条豆浆油条豆浆油条",
  "mcCategoryLabel" : [ "背景音乐" ],
  "mcVip" : "1",
  "mcPower" : "1",
  "mcWeight" : 3,
  "mcState" : "1",
  "updateUser" : "曹云芳",
  "updateDate" : "2023-03-09 15:54:43",
  "buttonList": [{ btnName: '试听', cb: fnalert }, { btnName: '试听1', cb: fnalert }]
}, {
  "mcId" : "177685",
  "mcName" : "金枝欲孽 咏叹调",
  "mcCategoryLabel" : null,
  "mcVip" : "0",
  "mcPower" : "0",
  "mcWeight" : 1,
  "mcState" : "0",
  "updateUser" : "曹云曹云芳曹云芳曹云芳芳",
  "updateDate" : "2023-03-09 10:26:04",
  "imgLink" : "https://resource.haigeek.com:443/download/resource/selfService/hardware/modeltypeimg/32922e2d1d2540f69cf3a71006f560ae.png",
  "buttonList": []
}, {
  "mcId" : "177685",
  "mcName" : "asdfa",
  "mcCategoryLabel" : null,
  "mcVip" : "0",
  "mcPower" : "0",
  "mcWeight" : 1,
  "mcState" : "0",
  "updateUser" : "曹wwe",
  "updateDate" : "2023-03-09 10:26:04",
  "imgLink" : "https://resource.haigeek.com:443/download/resource/selfService/hardware/modeltypeimg/32922e2d1d2540f69cf3a71006f560ae.png",
  "buttonList": []
}]
const fnSortEnd = (params) => {
  console.log(params);
}
</script>

Table Attributes（支持element-el-table所有配置）

参数说明类型可选值默认值
v-model显示的数据array——
tableConfig表格配置项(具体见下表)array—false

tableConfig Attributes（子项支持element-el-table-colum所有配置）

注：所有选项只有再需要时再进行配置，不允许无效配置

参数说明类型可选值默认值
label显示标题string——
customLabel自定义表头的内容-通过slot定义(column,index为列数据)object——
—name：对应slot的name值string——
infoConfig基础信息样式object——
—titleKey：标题对应表格数据Key值estring——
—idKey：ID对应表格数据Key值string——
—idLabel：id名称string——
—showLength: 显示的id长度，超出显示省略号（默认10）number—10
—imgKey: 图片对应表格数据Key值(没有不传)string——
tagConfig标签样式，常用于状态展示object——
—tabKey: 标签对应表格Key值string——
—filter: 表格数据与标签显示的对应关系(key:表格数据,value为h-ntag配置项（name，type）)object——
filterInfo该列作为展示筛选项object——
—check：true-默认展示，false-默认不展示boolean——
customSlot自定义展示内容-通过slot定义(row,index为行数据)object——
—name：对应slot的name值string——
operationConfig操作列object——
—showNum：展示按钮数量（参考table-operate组件配置，按钮配置再表格数据中定义）number——
—moreBtnIcon：隐藏按钮组的图标icon（参考table-operate组件配置，按钮配置再表格数据中定义）number——
—showLastDrag：true-最后展示拖拽按钮boolean——
lineClamp文本展示行数，超出显示省略号Number——

Events(可配置el-table所有方法)

方法名说明参数
fnSortEnd拖拽结束回调（如果使用v-model绑定data则会自动更新表格数据）