common-table 表格（齐思博）

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

基础用法

tableConfig、value属性必填，分别对应表格配置项和表格数据。可快捷配置部分常用内容。

<template>
  <div>
    <h-common-table v-model="tableData" :tableConfig="tableConfig" @fnSortEnd="fnSortEnd">
      <div slot="user" slot-scope="userInfo">
        <div>{{ userInfo.row.updateDate }} + {{ userInfo.index }}</div>
      </div>
      <div slot="label01" slot-scope="info">
				<div>{{ info.column.label }}-自定义{{ info.index }}</div>
			</div>
    </h-common-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      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,
        }
      ],
    }
  },
  mounted() {
    this.tableData = [{
      "mcId" : "95286",
      "mcName" : "豆浆油条豆浆油条豆浆油条豆浆油条",
      "mcCategoryLabel" : [ "背景音乐" ],
      "mcVip" : "1",
      "mcPower" : "1",
      "mcWeight" : 3,
      "mcState" : "1",
      "updateUser" : "曹云芳",
      "updateDate" : "2023-03-09 15:54:43",
      "buttonList": [{ btnName: '试听', cb: this.fnalert, visiable: true }, { btnName: '试听1', cb: this.fnalert, visiable: true }]
    }, {
      "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": []
    }]
  },
  methods: {
    showDialog() {
      this.asubmitDialog = true
    }
  },
}
</script>

显示代码

增加操作列及列筛选按钮

增加表格操作列以及右上角列筛选项，支持自定义slot。

<template>
  <div>
    <h-common-table v-model="tableData" :tableConfig="tableConfig" @fnSortEnd="fnSortEnd">
      <div slot="user" slot-scope="userInfo">
        <div>{{ userInfo.row.updateDate }} + {{ userInfo.index }}</div>
      </div>
    </h-common-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      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
          }
        }
      ],
    }
  },
  mounted() {
    this.tableData = [{
      "mcId" : "95286",
      "mcName" : "豆浆油条豆浆油条豆浆油条豆浆油条",
      "mcCategoryLabel" : [ "背景音乐" ],
      "mcVip" : "1",
      "mcPower" : "1",
      "mcWeight" : 3,
      "mcState" : "1",
      "updateUser" : "曹云芳",
      "updateDate" : "2023-03-09 15:54:43",
      "buttonList": [{ btnName: '试听', cb: this.fnalert, visiable: true }, { btnName: '试听1', cb: this.fnalert, visiable: true }]
    }, {
      "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": []
    }]
  },
  methods: {
    fnSortEnd(params) {
      console.log(params);
    }
  },
}
</script>

显示代码

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

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

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

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

参数	说明	类型	可选值	默认值
label	显示标题	string	—	—
customLabel	自定义表头的内容-通过slot定义(column,index为列数据)	object	—	—
—	name：对应slot的name值	string	—	—
infoConfig	基础信息样式	object	—	—
—	titleKey：标题对应表格数据Key值e	string	—	—
—	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则会自动更新表格数据）	{newIndex: 新位置下标, oldIndex: 老位置下标}