DeeTable
<h2>DeeTable 表格</h2>
<p>> <font color=#2A75CE>定义： 参数中<font color=red>*</font>表示必填项，<font color=black>{key}</font>表示对象的键，<font color=black>{value}</font>表示对象的值；类型为array或object有子属性</font></p>
<h3>Attributes</h3>
<table>
<thead>
<tr>
<th style="text-align: center;">参数</th>
<th style="text-align: center;">说明</th>
<th style="text-align: center;">类型</th>
<th style="text-align: center;">可选择</th>
<th style="text-align: center;">默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;"><font color=red>*</font>columns</td>
<td style="text-align: center;">表格列</td>
<td style="text-align: center;">array</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;"><font color=red>*</font>data</td>
<td style="text-align: center;">表格数据</td>
<td style="text-align: center;">array</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">loading</td>
<td style="text-align: center;">表格是否显示加载状态</td>
<td style="text-align: center;">boolean</td>
<td style="text-align: center;">true/false</td>
<td style="text-align: center;">false</td>
</tr>
<tr>
<td style="text-align: center;">loadingOptions</td>
<td style="text-align: center;">表格加载状态配置，具体配置参考element-ui</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">options</td>
<td style="text-align: center;">表格配置，具体配置参考element-ui</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">options.checkStrictly</td>
<td style="text-align: center;">表示是否严格的遵守父子节点不互相关联（懒加载的树表格该配置不适用）</td>
<td style="text-align: center;">boolean</td>
<td style="text-align: center;">true/false</td>
<td style="text-align: center;">false(表示勾选父节点同时勾选子节点)</td>
</tr>
<tr>
<td style="text-align: center;">indexRow</td>
<td style="text-align: center;">序号列</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">selectionRow</td>
<td style="text-align: center;">选择列</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">rowHandle</td>
<td style="text-align: center;">自定义操作列</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
<tr>
<td style="text-align: center;">pagination</td>
<td style="text-align: center;">分页对象</td>
<td style="text-align: center;">object</td>
<td style="text-align: center;">—</td>
<td style="text-align: center;">—</td>
</tr>
</tbody>
</table>
<h3>Events</h3>
<table>
<thead>
<tr>
<th style="text-align: center;">事件名称</th>
<th style="text-align: center;">说明</th>
<th style="text-align: center;">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">cell-data-change</td>
<td style="text-align: center;">表格行数据改变</td>
<td style="text-align: center;">{rowIndex,key,value,row}</td>
</tr>
<tr>
<td style="text-align: center;">current-change</td>
<td style="text-align: center;">行选中状态</td>
<td style="text-align: center;">currentRow, oldCurrentRow</td>
</tr>
<tr>
<td style="text-align: center;">select</td>
<td style="text-align: center;">勾选数据时触发的事件</td>
<td style="text-align: center;">selection, row</td>
</tr>
<tr>
<td style="text-align: center;">select-all</td>
<td style="text-align: center;">勾选全选时触发的事件</td>
<td style="text-align: center;">selection</td>
</tr>
<tr>
<td style="text-align: center;">selection-change</td>
<td style="text-align: center;">复选框选择项发生变化时触发的事件</td>
<td style="text-align: center;">selection</td>
</tr>
<tr>
<td style="text-align: center;">cell-mouse-enter</td>
<td style="text-align: center;">单元格 hover 进入时触发的事件</td>
<td style="text-align: center;">row, column, cell, event</td>
</tr>
<tr>
<td style="text-align: center;">cell-mouse-leave</td>
<td style="text-align: center;">单元格 hover 退出时触发的事件</td>
<td style="text-align: center;">row, column, cell, event</td>
</tr>
<tr>
<td style="text-align: center;">cell-click</td>
<td style="text-align: center;">单元格点击时触发的事件</td>
<td style="text-align: center;">row, column, cell, event</td>
</tr>
<tr>
<td style="text-align: center;">cell-dblclick</td>
<td style="text-align: center;">单元格双击时触发的事件</td>
<td style="text-align: center;">row, column, cell, event</td>
</tr>
<tr>
<td style="text-align: center;">row-click</td>
<td style="text-align: center;">行点击时触发的事件</td>
<td style="text-align: center;">row, event, column</td>
</tr>
<tr>
<td style="text-align: center;">row-contextmenu</td>
<td style="text-align: center;">行右键点击时触发的事件</td>
<td style="text-align: center;">row, event</td>
</tr>
<tr>
<td style="text-align: center;">row-dblclick</td>
<td style="text-align: center;">行双击时触发的事件</td>
<td style="text-align: center;">row, event</td>
</tr>
<tr>
<td style="text-align: center;">header-click</td>
<td style="text-align: center;">表头点击时触发的事件</td>
<td style="text-align: center;">column, event</td>
</tr>
<tr>
<td style="text-align: center;">header-contextmenu</td>
<td style="text-align: center;">表头右键点击时触发的事件</td>
<td style="text-align: center;">column, event</td>
</tr>
<tr>
<td style="text-align: center;">sort-change</td>
<td style="text-align: center;">排序状态</td>
<td style="text-align: center;">{ column, prop, order }</td>
</tr>
<tr>
<td style="text-align: center;">pagination-size-change</td>
<td style="text-align: center;">每页条数改变</td>
<td style="text-align: center;">pageSize</td>
</tr>
<tr>
<td style="text-align: center;">pagination-current-change</td>
<td style="text-align: center;">当前页码改变</td>
<td style="text-align: center;">currentPage</td>
</tr>
<tr>
<td style="text-align: center;">pagination-prev-click</td>
<td style="text-align: center;">上一页</td>
<td style="text-align: center;">currentPage</td>
</tr>
<tr>
<td style="text-align: center;">pagination-next-click</td>
<td style="text-align: center;">下一页</td>
<td style="text-align: center;">currentPage</td>
</tr>
<tr>
<td style="text-align: center;">pageChange</td>
<td style="text-align: center;">当前页面改变或每页条数改变</td>
<td style="text-align: center;">currentPage</td>
</tr>
</tbody>
</table>
<p><!-- 具体属性配置参考：<a href="https://d2admin.fairyever.com/#/demo/d2-crud/index">https://d2admin.fairyever.com/#/demo/d2-crud/index</a> --></p>
<p>> <font color=#2A75CE>表头包含具名插槽，插槽名称：header</font>
<font color=#2A75CE>表格在使用自定义组件时，需要在数据行中添加属性:show，确保单行渲染，不添加组件不显示</font></p>
<h3>代码参考</h3>
<pre><code> &lt;template&gt;
&lt;div class=&quot;table&quot;&gt;
&lt;h1&gt;Table表格&lt;/h1&gt;
&lt;h5&gt;用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。&lt;/h5&gt;
&lt;h2&gt;基础表格&lt;/h2&gt;
&lt;h5&gt;基础的表格展示用法。&lt;/h5&gt;
&lt;dee-table
:columns=&quot;deeColums&quot;
:data=&quot;deeData&quot;
/&gt;
&lt;h2&gt;添加各个属性的表格&lt;/h2&gt;
&lt;h5&gt;以下实例包括'带斑马纹','带边框','固定表头', '固定列','多级表头'&lt;/h5&gt;
&lt;dee-table
:columns=&quot;deeColums1&quot;
:data=&quot;deeData&quot;
:options=&quot;deeOptions&quot;
/&gt;
&lt;h2&gt;带有输入框的表格&lt;/h2&gt;
&lt;h5&gt;以下实例包括input框的校验,select框的校验&lt;/h5&gt;
&lt;dee-table
:columns=&quot;deeColums2&quot;
:data=&quot;deeData2&quot;
@checkResult=&quot;checkResult&quot;
/&gt;
&lt;h2&gt;带有button按钮的表格&lt;/h2&gt;
&lt;h5&gt;以下实例在操作一列可以实现针对当前行的操作&lt;/h5&gt;
&lt;dee-table
:columns=&quot;deeColums3&quot;
:data=&quot;deeData3&quot;
/&gt;
&lt;h2&gt;带有复选框的表格&lt;/h2&gt;
&lt;h5&gt;以下实例可以实现选择多行的需求&lt;/h5&gt;
&lt;dee-table
ref=&quot;multipleTable&quot;
:columns=&quot;deeColums4&quot;
:data=&quot;deeData4&quot;
:selection-row=&quot;selectionRow&quot;
@select=&quot;select&quot;
@select-all=&quot;selectAll&quot;
@selection-change=&quot;selectionChange&quot;
/&gt;
&lt;div style=&quot;margin-top:20px&quot;&gt;
&lt;el-button @click=&quot;handleClear()&quot;&gt;清除选择&lt;/el-button&gt;
&lt;/div&gt;
&lt;h2&gt;带有树形数据与懒加载的表格&lt;/h2&gt;
&lt;h5&gt;以下实例可以实现树形数据&lt;/h5&gt;
&lt;dee-table
:columns=&quot;deeColums5&quot;
:data=&quot;deeData5&quot;
:options=&quot;optionsTree&quot;
/&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import link from './link'
import tableCellFormCheck from '@/components/Table/tableCellFormCheck'
export default {
name: 'Table',
components: {},
data() {
const validateAcquaintance = (rule, value, callback) =&gt; {
if (!value) {
callback(new Error('必须输入承接部门'))
}
value = Number(value)
if (typeof value === 'number' &amp;&amp; !isNaN(value)) {
if (value &lt; 0 || value &gt; 3) {
callback(new Error('承接部门在 0 至 3之间'))
} else {
callback()
}
} else {
callback(new Error('承接部门必须为数字'))
}
}
return {
// 基础表格
deeColums: [
{ title: '编号', key: 'number' },
{ title: '名称', key: 'name' },
{ title: '状态', key: 'status' }
],
deeColums1: [
{ title: '编号', key: 'number', width: '300', fixed: 'left' }, // 固定列
{ title: '名称', width: '1300',
children: [
{
title: '名称2', key: 'name', width: '300'
},
{
title: '名称1', key: 'name', width: '300'
}
]
}, // 多级表头
{ title: '状态', key: 'status', width: '1300' }
],
deeData: [
{
number: '302A-001',
name: '302A专用零件',
status: '编制'
},
{
number: '302A-002',
name: '302A专用零件02',
status: '驳回'
},
{
number: '302A-003',
name: '302A专用零件03',
status: '已发放'
},
{
number: '302A-004',
name: '302A专用零件04',
status: '编制'
}
],
deeOptions: {
stripe: true, // 带斑马纹
border: true, // 带边框
height: '200' // 固定表头
},
deeColums2: [
{
title: '承接部门',
key: 'depart',
component: {
name: tableCellFormCheck,
show: true,
props: {
'is-require': true,
formRules: [{ required: true, message: '请选择活动区域', trigger: 'change' }, { validator: validateAcquaintance, trigger: 'change' }],
bindKey: 'depart',
component: {
name: 'el-input'
}
},
handler: {
changeForm: (val) =&gt; {
}
}
}
},
{
title: '供应部门',
key: 'apply',
component: {
name: tableCellFormCheck,
show: true,
props: {
'is-require': false,
bindKey: 'apply',
component: {
name: 'el-input'
}
}
}
},
{
title: '设计师',
key: 'designer',
component: {
name: tableCellFormCheck,
show: true,
props: {
'is-require': true,
formRules: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
bindKey: 'designer',
component: {
name: 'el-select',
options: [
{
label: '张三',
value: 'zs001'
},
{
label: '李四',
value: 'ls002'
},
{
label: '王五',
value: 'ww001'
}
]
}
},
handler: {
changeForm: (val) =&gt; {
}
}
}
}
],
deeData2: [
{
depart: '111'
},
{
apply: ''
},
{
designer: ''
}
],
deeColums3: [
{ title: '编号', key: 'number' },
{ title: '名称', key: 'name' },
{ title: '状态', key: 'status' },
{ title: '操作',
component: {
name: link,
show: true
}
}
],
deeData3: [
{
number: '302A-001',
name: '302A专用零件',
status: '编制'
},
{
number: '302A-002',
name: '302A专用零件02',
status: '驳回'
},
{
number: '302A-003',
name: '302A专用零件03',
status: '已发放'
},
{
number: '302A-004',
name: '302A专用零件04',
status: '编制'
}
],
deeColums4: [
{ title: '编号', key: 'number' },
{ title: '名称', key: 'name' },
{ title: '状态', key: 'status' }
],
deeData4: [
{
number: '302A-001',
name: '302A专用零件',
status: '编制'
},
{
number: '302A-002',
name: '302A专用零件02',
status: '驳回'
},
{
number: '302A-003',
name: '302A专用零件03',
status: '已发放'
},
{
number: '302A-004',
name: '302A专用零件04',
status: '编制'
}
],
selectionRow: {},
deeColums5: [
{ title: '编号', key: 'number' },
{ title: '名称', key: 'name' },
{ title: '状态', key: 'status' }
],
deeData5: [
{
number: '302A-001',
name: '302A专用零件',
status: '编制'
// children: [
// {
// number: '302A-001-001',
// name: '302A-001专用零件',
// status: '编制'
// }
// ]
},
{
number: '302A-002',
name: '302A专用零件02',
status: '驳回',
hasChildren: true
},
{
number: '302A-003',
name: '302A专用零件03',
status: '已发放'
},
{
number: '302A-004',
name: '302A专用零件04',
status: '编制'
}
],
optionsTree: {
'row-key': 'number', // value值需为可以标识该对象唯一的值
lazy: true,
load: (tree, treeNode, resolve) =&gt; {
setTimeout(() =&gt; {
resolve([
{
number: '302A-002-002',
name: '302A专用零件02-002',
status: '驳回'
}
])
}, 3000)
},
'tree-props': { children: 'children', hasChildren: 'hasChildren' }
}
}
},
methods: {
checkResult(val) {
console.log(val)
},
select(val) {
console.log(val)
},
selectAll(val) {
console.log(val)
},
selectionChange(val) {
console.log(val)
},
handleClear() {
console.log(this.$refs.multipleTable.$refs.deeTable.clearSelection())
}
}
}
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt;
.table{
overflow-y:scroll;
height:100%
}
&lt;/style&gt;
</code></pre>