element-plus table el-table 表格，文档

发布时间:2025-06-05 12:41:58 作者:13761027508 阅读:3

基础表格#

基础的表格展示用法。

当 el-table 元素中注入 data 对象数组后，在 el-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。可以使用 width 属性来定义列宽。

<el-table :data="tableData" style="width: 100%">

<el-table-column prop="date" label="Date" width="180" />

<el-table-column prop="name" label="Name" width="180" />

<el-table-column prop="address" label="Address" />

</el-table>

</template>

const tableData = [

{

date: '2016-05-03',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-02',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-04',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-01',

address: 'No. 189, Grove St, Los Angeles',

]

</script>

带斑马纹表格#

使用带斑马纹的表格，可以更容易区分出不同行的数据。

stripe 可以创建带斑马纹的表格。如果 true, 表格将会带有斑马纹。

<el-table :data="tableData" stripe style="width: 100%">

<el-table-column prop="date" label="Date" width="180" />

<el-table-column prop="name" label="Name" width="180" />

<el-table-column prop="address" label="Address" />

</el-table>

</template>

const tableData = [

{

date: '2016-05-03',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-02',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-04',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-01',

address: 'No. 189, Grove St, Los Angeles',

]

</script>

带边框表格#

默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用 border 属性，把该属性设置为 true 即可启用。

<el-table :data="tableData" border style="width: 100%">

<el-table-column prop="date" label="Date" width="180" />

<el-table-column prop="name" label="Name" width="180" />

<el-table-column prop="address" label="Address" />

</el-table>

</template>

const tableData = [

{

date: '2016-05-03',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-02',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-04',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-01',

address: 'No. 189, Grove St, Los Angeles',

]

</script>

带状态表格#

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，这样就可以自定义每一行的样式了。

<el-table

:data="tableData"

style="width: 100%"

:row-class-name="tableRowClassName"

<el-table-column prop="date" label="Date" width="180" />

<el-table-column prop="name" label="Name" width="180" />

<el-table-column prop="address" label="Address" />

</el-table>

</template>

interface User {

date: string

address: string

}

const tableRowClassName = ({

row,

rowIndex,

}: {

row: User

rowIndex: number

}) => {

if (rowIndex === 1) {

return 'warning-row'

} else if (rowIndex === 3) {

return 'success-row'

}

return ''

}

const tableData: User[] = [

{

date: '2016-05-03',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-02',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-04',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-01',

address: 'No. 189, Grove St, Los Angeles',

]

</script>

<style>

.el-table .warning-row {

--el-table-tr-bg-color: var(--el-color-warning-light-9);

}

.el-table .success-row {

--el-table-tr-bg-color: var(--el-color-success-light-9);

}

</style>

固定表头#

纵向内容过多时，可选择固定表头。

只要在 el-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。

<el-table :data="tableData" height="250" style="width: 100%">

<el-table-column prop="date" label="Date" width="180" />

<el-table-column prop="name" label="Name" width="180" />

<el-table-column prop="address" label="Address" />

</el-table>

</template>

const tableData = [

{

date: '2016-05-03',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-02',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-04',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-01',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-08',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-06',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-07',

address: 'No. 189, Grove St, Los Angeles',

]

</script>

固定列#

横向内容过多时，可选择固定列。

固定列需要使用 fixed 属性，它接受 Boolean 值。如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。

<el-table :data="tableData" style="width: 100%">

<el-table-column fixed prop="date" label="Date" width="150" />

<el-table-column prop="name" label="Name" width="120" />

<el-table-column prop="state" label="State" width="120" />

<el-table-column prop="city" label="City" width="120" />

<el-table-column prop="address" label="Address" width="600" />

<el-table-column prop="zip" label="Zip" width="120" />

<el-table-column fixed="right" label="Operations" width="120">

<el-button link type="primary" size="small" @click="handleClick"

>Detail</el-button

<el-button link type="primary" size="small">Edit</el-button>

</template>

</el-table-column>

</el-table>

</template>

const handleClick = () => {

console.log('click')

}

const tableData = [

{

date: '2016-05-03',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

tag: 'Home',

{

date: '2016-05-02',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

tag: 'Office',

{

date: '2016-05-04',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

tag: 'Home',

{

date: '2016-05-01',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

tag: 'Office',

]

</script>

固定列和表头#

当您有大量数据块放入表中，您可以同时固定表头和列。

固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

<el-table :data="tableData" style="width: 100%" height="250">

<el-table-column fixed prop="date" label="Date" width="150" />

<el-table-column prop="name" label="Name" width="120" />

<el-table-column prop="state" label="State" width="120" />

<el-table-column prop="city" label="City" width="320" />

<el-table-column prop="address" label="Address" width="600" />

<el-table-column prop="zip" label="Zip" width="120" />

</el-table>

</template>

const tableData = [

{

date: '2016-05-03',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-02',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-04',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-01',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-08',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-06',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-07',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

]

</script>

流体高度#

当数据量动态变化时，可以为 Table 设置一个最大高度。

通过设置 max-height 属性为 el-table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

<el-table :data="tableData" style="width: 100%" max-height="250">

<el-table-column fixed prop="date" label="Date" width="150" />

<el-table-column prop="name" label="Name" width="120" />

<el-table-column prop="state" label="State" width="120" />

<el-table-column prop="city" label="City" width="120" />

<el-table-column prop="address" label="Address" width="600" />

<el-table-column prop="zip" label="Zip" width="120" />

<el-table-column fixed="right" label="Operations" width="120">

<el-button

link

type="primary"

size="small"

@click.prevent="deleteRow(scope.$index)"

Remove

</el-button>

</template>

</el-table-column>

</el-table>

<el-button class="mt-4" style="width: 100%" @click="onAddItem"

>Add Item</el-button

</template>

import { ref } from 'vue'

import dayjs from 'dayjs'

const now = new Date()

const tableData = ref([

{

date: '2016-05-01',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-02',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-03',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

])

const deleteRow = (index: number) => {

tableData.value.splice(index, 1)

}

const onAddItem = () => {

now.setDate(now.getDate() + 1)

tableData.value.push({

date: dayjs(now).format('YYYY-MM-DD'),

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

})

}

</script>

多级表头#

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要将el-table-column 放置于el-table-column 中，你可以实现组头。

<el-table :data="tableData" style="width: 100%">

<el-table-column prop="date" label="Date" width="150" />

<el-table-column label="Delivery Info">

<el-table-column prop="name" label="Name" width="120" />

<el-table-column label="Address Info">

<el-table-column prop="state" label="State" width="120" />

<el-table-column prop="city" label="City" width="120" />

<el-table-column prop="address" label="Address" />

<el-table-column prop="zip" label="Zip" width="120" />

</el-table-column>

</el-table>

</template>

const tableData = [

{

date: '2016-05-03',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-02',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-04',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-01',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-08',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-06',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-07',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

]

</script>

固定表头#

支持固定群组头

组头的属性 fixed 由最外层 el-table-column决定

<el-table :data="tableData" style="width: 100%" height="250">

<el-table-column fixed prop="date" label="Date" width="150" />

<el-table-column prop="name" label="Name" width="120" />

<el-table-column prop="state" label="State" width="120" />

<el-table-column prop="city" label="City" width="320" />

<el-table-column prop="address" label="Address" width="600" />

<el-table-column prop="zip" label="Zip" width="120" />

</el-table>

</template>

const tableData = [

{

date: '2016-05-03',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-02',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-04',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-01',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-08',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-06',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

{

date: '2016-05-07',

state: 'California',

city: 'Los Angeles',

address: 'No. 189, Grove St, Los Angeles',

zip: 'CA 90036',

]

</script>

单选#

选择单行数据时使用色块表示。

Table 组件提供了单选的支持，只需要配置 highlight-current-row 属性即可实现单选。之后由 current-change 事件来管理选中时触发的事件，它会传入 currentRow，oldCurrentRow。如果需要显示索引，可以增加一列 el-table-column，设置 type 属性为 index 即可显示从 1 开始的索引号。

<el-table

ref="singleTableRef"

:data="tableData"

highlight-current-row

style="width: 100%"

@current-change="handleCurrentChange"

<el-table-column type="index" width="50" />

<el-table-column property="date" label="Date" width="120" />

<el-table-column property="name" label="Name" width="120" />

<el-table-column property="address" label="Address" />

</el-table>

<el-button @click="setCurrent(tableData[1])">Select second row</el-button>

<el-button @click="setCurrent()">Clear selection</el-button>

</div>

</template>

import { ref } from 'vue'

import { ElTable } from 'element-plus'

interface User {

date: string

address: string

}

const currentRow = ref()

const singleTableRef = ref<InstanceType<typeof ElTable>>()

const setCurrent = (row?: User) => {

singleTableRef.value!.setCurrentRow(row)

}

const handleCurrentChange = (val: User | undefined) => {

currentRow.value = val

}

const tableData: User[] = [

{

date: '2016-05-03',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-02',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-04',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-01',

address: 'No. 189, Grove St, Los Angeles',

]

</script>

多选#

你也可以选择多行。

实现多选非常简单: 手动添加一个 el-table-column，设 type 属性为 selection 即可；除了多选，这里还使用到了 show-overflow-tooltip属性。默认情况下，如果单元格内容过长，会占用多行显示。若需要单行显示可以使用 show-overflow-tooltip 属性，它接受一个 Boolean，为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table

ref="multipleTableRef"

:data="tableData"

style="width: 100%"

@selection-change="handleSelectionChange"

<el-table-column type="selection" width="55" />

<el-table-column label="Date" width="120">

<template #default="scope">{{ scope.row.date }}</template>

</el-table-column>

<el-table-column property="name" label="Name" width="120" />

<el-table-column property="address" label="Address" show-overflow-tooltip />

</el-table>

<el-button @click="toggleSelection([tableData[1], tableData[2]])"

>Toggle selection status of second and third rows</el-button

<el-button @click="toggleSelection()">Clear selection</el-button>

</div>

</template>

import { ref } from 'vue'

import { ElTable } from 'element-plus'

interface User {

date: string

address: string

}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const multipleSelection = ref<User[]>([])

const toggleSelection = (rows?: User[]) => {

if (rows) {

rows.forEach((row) => {

// TODO: improvement typing when refactor table

// eslint-disable-next-line @typescript-eslint/ban-ts-comment

// @ts-expect-error

multipleTableRef.value!.toggleRowSelection(row, undefined)

})

} else {

multipleTableRef.value!.clearSelection()

}

const handleSelectionChange = (val: User[]) => {

multipleSelection.value = val

}

const tableData: User[] = [

{

date: '2016-05-03',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-02',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-04',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-01',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-08',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-06',

address: 'No. 189, Grove St, Los Angeles',

{

date: '2016-05-07',

address: 'No. 189, Grove St, Los Angeles',

]

</script>

Table 属性#

属性名说明类型可选值默认值

data 显示的数据 array — —

height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 string / number — —

max-height Table 的最大高度。合法的值为数字或者单位为 px 的高度。 string / number — —

stripe 是否为斑马纹 table boolean — false

border 是否带有纵向边框 boolean — false

size Table 的尺寸 string large / default /small —

fit 列的宽度是否自撑开 boolean — true

show-header 是否显示表头 boolean — true

highlight-current-row 是否要高亮当前行 boolean — false

current-row-key 当前行的 key，只写属性 string / number — —

row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 function({ row, rowIndex }) / string — —

row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 function({ row, rowIndex }) / object — —

cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 function({ row, column, rowIndex, columnIndex }) / string — —

cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 function({ row, column, rowIndex, columnIndex }) / object — —

header-row-class-name 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 function({ row, rowIndex }) / string — —

header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 function({ row, rowIndex }) / object — —

header-cell-class-name 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 function({ row, column, rowIndex, columnIndex }) / string — —

header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 function({ row, column, rowIndex, columnIndex }) / object — —

row-key 行数据的 Key，用来优化 Table 的渲染；在使用reserve-selection功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 function(row) / string — —

empty-text 空数据时显示的文本内容，也可以通过 #empty 设置 string — No Data

default-expand-all 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 boolean — false

expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 array — —

default-sort 默认的排序列的 prop 和顺序。它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 object (order: 'ascending' 'descending') 如果 prop 被设置, 且 order 没有设置, 那么 order 默认为 ascending

tooltip-effect 溢出的 tooltip 的 effect string dark / light dark

tooltip-options 2.2.28 溢出 tooltip 的选项，参见下述 tooltip 组件

object

请参考 tooltip

object

show-summary 是否在表尾显示合计行 boolean — false

sum-text 显示摘要行第一列的文本 string — Sum

summary-method 自定义的合计计算方法 function({ columns, data }) — —

span-method 合并行或列的计算方法 function({ row, column, rowIndex, columnIndex }) — —

select-on-indeterminate 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 boolean — true

indent 展示树形数据时，树节点的缩进 number — 16

lazy 是否懒加载子节点数据 boolean — —

load 加载子节点数据的函数，lazy 为 true 时生效 function(row, treeNode, resolve) — —

tree-props 渲染嵌套数据的配置选项 object — { hasChildren: 'hasChildren', children: 'children' }

table-layout 设置表格单元、行和列的布局方式 string fixed / auto fixed

scrollbar-always-on 总是显示滚动条 boolean — false

show-overflow-tooltip 是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。 boolean | [object](#table-attributes) 2.3.7

object

2.3.7 参考 tabletooltip-options -

flexible 2.2.1 确保主轴的最小尺寸，以便不超过内容 boolean — false

Table 事件#

事件名说明回调参数

select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row

select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection

selection-change 当选择项发生变化时会触发该事件 selection

cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event

cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event

cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event

cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event

cell-contextmenu 当某个单元格被鼠标右键点击时会触发该事件 row, column, cell, event

row-click 当某一行被点击时会触发该事件 row, column, event

row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event

row-dblclick 当某一行被双击时会触发该事件 row, column, event

header-click 当某一列的表头被点击时会触发该事件 column, event

header-contextmenu 当某一列的表头被鼠标右键点击时触发该事件 column, event

sort-change 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }

filter-change column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 filters

current-change 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow

header-dragend 当拖动表头改变了列的宽度的时候会触发该事件 newWidth, oldWidth, column, event

expand-change 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） row, (expandedRows | expanded)

Table 方法#

方法名说明参数

clearSelection 用于多选表格，清空用户的选择 —

getSelectionRows 返回当前选中的行

toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则可直接设置这一行选中与否 row, selected

toggleAllSelection 用于多选表格，切换全选和全不选 —

toggleRowExpansion 用于可扩展的表格或树表格，如果某行被扩展，则切换。使用第二个参数，您可以直接设置该行应该被扩展或折叠。 row, expanded

setCurrentRow 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 row

clearSort 用于清空排序条件，数据会恢复成未排序的状态 —

clearFilter 传入由columnKey 组成的数组以清除指定列的过滤条件。如果没有参数，清除所有过滤器 columnKeys

doLayout 对 Table 进行重新布局。当表格可见性变化时，您可能需要调用此方法以获得正确的布局 —

sort 手动排序表格。参数 prop 属性指定排序列，order 指定排序顺序。 prop: string, order: string

scrollTo 滚动到一组特定坐标 (options: ScrollToOptions | number, yCoord?: number)

setScrollTop 设置垂直滚动位置 top

setScrollLeft 设置水平滚动位置 left

Table 插槽#

插槽名说明子标签

- 自定义默认内容 Table-column

append 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。 —

empty 当数据为空时自定义的内容 —

Table-column 属性#

属性名说明类型可选值默认值

type 对应列的类型。如果设置了selection则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 string selection / index / expand —

index 如果设置了 type=index，可以通过传递 index 属性来自定义索引 number / function(index) — —

label 显示的标题 string — —

column-key column 的 key， column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 string — —

prop 字段名称对应列内容的字段名，也可以使用 property属性 string — —

width 对应列的宽度 string / number — —

min-width 对应列的最小宽度，对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 string / number — —

fixed 列是否固定在左侧或者右侧。 true 表示固定在左侧 string / boolean true / 'left' / 'right' —

render-header 列标题 Label 区域渲染使用的 Function function({ column, $index }) — —

sortable 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 boolean / string custom false

sort-method 指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。应该如同 Array.sort 那样返回一个 Number function(a, b) — —

sort-by 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 function(row, index) / string / array — —

sort-orders 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 array 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序 ['ascending', 'descending', null]

resizable 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） boolean — true

formatter 用来格式化内容 function(row, column, cellValue, index) — —

show-overflow-tooltip 当内容过长被隐藏时显示 tooltip boolean \

object

2.2.28 参考表格的 tooltip-options

align 对齐方式 string left / center / right left

header-align 表头对齐方式，若不设置该项，则使用表格的对齐方式 string left / center / right —

class-name 列的 className string — —

label-class-name 当前列标题的自定义类名 string — —

selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 function(row, index) — —

reserve-selection 数据刷新后是否保留选项，仅对 type=selection 的列有效，请注意，需指定 row-key 来让这个功能生效。 boolean — false

filters 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。数组中的每个元素都需要有 text 和 value 属性。 Array<{text: string, value: string}> — —

filter-placement 过滤弹出框的定位 string 与 Tooltip 的 placement 属性相同 —

filter-class-name 2.5.0 过滤弹出框的 className string — —

filter-multiple 数据过滤的选项是否多选 boolean — true

filter-method 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 function(value, row, column) — —

filtered-value 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 array — —

Table-column 插槽#

插槽名说明

— 自定义列的内容作用域参数为 { row, column, $index }

header 自定义表头的内容，作用域参数为 { column, $index }

常见问题解答（FAQ）#

如何在表格中使用图像预览？#

<el-table-column label="Thumbnail" width="180">

<el-image :preview-src-list="srcList"/>

</div>

</template>

</el-table-column>

注：由于固定列是通过 sticky 来实现的，如果表格中含有固定列，请在图像上添加 preview-teleported 属性。

当使用 DOM 模板时，为什么列没有渲染？#

典型问题： #5046 #5862 #6919

这是因为 HTML 定义只允许一些特定元素省略关闭标签，最常见的是 <input> 和 <img>。对于任意其他元素，如果你省略了关闭标签，原生的 HTML 解析器会认为你从未关闭打开的标签。

13761027508

用户等级:初级

基本文件流程错误 SQL 调试

/www/wwwroot/www.shve.cn/public/index.php ( 0.79 KB )
/www/wwwroot/www.shve.cn/vendor/autoload.php ( 0.42 KB )
/www/wwwroot/www.shve.cn/vendor/composer/autoload_real.php ( 1.70 KB )
/www/wwwroot/www.shve.cn/vendor/composer/platform_check.php ( 0.90 KB )
/www/wwwroot/www.shve.cn/vendor/composer/ClassLoader.php ( 15.69 KB )
/www/wwwroot/www.shve.cn/vendor/composer/autoload_static.php ( 9.21 KB )
/www/wwwroot/www.shve.cn/vendor/ralouphie/getallheaders/src/getallheaders.php ( 1.60 KB )
/www/wwwroot/www.shve.cn/vendor/symfony/deprecation-contracts/function.php ( 0.99 KB )
/www/wwwroot/www.shve.cn/vendor/guzzlehttp/guzzle/src/functions_include.php ( 0.16 KB )
/www/wwwroot/www.shve.cn/vendor/guzzlehttp/guzzle/src/functions.php ( 5.55 KB )
/www/wwwroot/www.shve.cn/vendor/adbario/php-dot-notation/src/helpers.php ( 0.57 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-helper/src/helper.php ( 8.34 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/stubs/load_stubs.php ( 0.16 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Exception.php ( 1.69 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Facade.php ( 2.71 KB )
/www/wwwroot/www.shve.cn/vendor/symfony/polyfill-php80/bootstrap.php ( 1.50 KB )
/www/wwwroot/www.shve.cn/vendor/symfony/polyfill-mbstring/bootstrap.php ( 8.26 KB )
/www/wwwroot/www.shve.cn/vendor/symfony/polyfill-mbstring/bootstrap80.php ( 9.77 KB )
/www/wwwroot/www.shve.cn/vendor/symfony/var-dumper/Resources/functions/dump.php ( 0.99 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-captcha/src/helper.php ( 1.37 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/App.php ( 20.01 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Container.php ( 15.39 KB )
/www/wwwroot/www.shve.cn/vendor/psr/container/src/ContainerInterface.php ( 1.02 KB )
/www/wwwroot/www.shve.cn/app/provider.php ( 0.19 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Http.php ( 6.04 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-helper/src/helper/Str.php ( 7.29 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Env.php ( 4.52 KB )
/www/wwwroot/www.shve.cn/app/common.php ( 24.86 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/helper.php ( 18.47 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Config.php ( 4.62 KB )
/www/wwwroot/www.shve.cn/config/app.php ( 1.89 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/facade/Env.php ( 1.67 KB )
/www/wwwroot/www.shve.cn/config/cache.php ( 0.78 KB )
/www/wwwroot/www.shve.cn/config/captcha.php ( 1.22 KB )
/www/wwwroot/www.shve.cn/config/console.php ( 0.23 KB )
/www/wwwroot/www.shve.cn/config/cookie.php ( 0.56 KB )
/www/wwwroot/www.shve.cn/config/database.php ( 2.15 KB )
/www/wwwroot/www.shve.cn/config/filesystem.php ( 0.61 KB )
/www/wwwroot/www.shve.cn/config/lang.php ( 0.81 KB )
/www/wwwroot/www.shve.cn/config/log.php ( 1.35 KB )
/www/wwwroot/www.shve.cn/config/middleware.php ( 0.19 KB )
/www/wwwroot/www.shve.cn/config/project.php ( 8.71 KB )
/www/wwwroot/www.shve.cn/config/route.php ( 1.54 KB )
/www/wwwroot/www.shve.cn/config/session.php ( 0.57 KB )
/www/wwwroot/www.shve.cn/config/trace.php ( 0.34 KB )
/www/wwwroot/www.shve.cn/config/view.php ( 0.82 KB )
/www/wwwroot/www.shve.cn/app/event.php ( 0.25 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Event.php ( 6.97 KB )
/www/wwwroot/www.shve.cn/app/service.php ( 0.13 KB )
/www/wwwroot/www.shve.cn/app/AppService.php ( 0.26 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Service.php ( 1.64 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Lang.php ( 7.22 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/lang/zh-cn.php ( 13.27 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/initializer/Error.php ( 3.27 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/initializer/RegisterService.php ( 1.33 KB )
/www/wwwroot/www.shve.cn/vendor/services.php ( 0.22 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/service/PaginatorService.php ( 1.52 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/service/ValidateService.php ( 0.99 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/service/ModelService.php ( 1.75 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-captcha/src/CaptchaService.php ( 0.52 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-multi-app/src/Service.php ( 1.08 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-trace/src/Service.php ( 0.77 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Middleware.php ( 6.65 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/initializer/BootService.php ( 0.77 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/Paginator.php ( 11.67 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Validate.php ( 46.61 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/Model.php ( 26.67 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-helper/src/contract/Arrayable.php ( 0.09 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-helper/src/contract/Jsonable.php ( 0.13 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/concern/Attribute.php ( 18.90 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/concern/RelationShip.php ( 26.44 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/concern/ModelEvent.php ( 2.24 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/concern/TimeStamp.php ( 5.69 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/concern/AutoWriteId.php ( 1.44 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/concern/Conversion.php ( 10.86 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Db.php ( 2.88 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/DbManager.php ( 8.33 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Log.php ( 6.27 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Manager.php ( 3.92 KB )
/www/wwwroot/www.shve.cn/vendor/psr/log/src/LoggerInterface.php ( 2.68 KB )
/www/wwwroot/www.shve.cn/vendor/psr/log/src/LoggerTrait.php ( 2.69 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Cache.php ( 4.91 KB )
/www/wwwroot/www.shve.cn/vendor/psr/simple-cache/src/CacheInterface.php ( 4.71 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-helper/src/helper/Arr.php ( 16.08 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/cache/driver/File.php ( 7.60 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/cache/Driver.php ( 8.17 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/contract/CacheHandlerInterface.php ( 1.99 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Console.php ( 22.64 KB )
/www/wwwroot/www.shve.cn/app/Request.php ( 0.09 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Request.php ( 54.27 KB )
/www/wwwroot/www.shve.cn/app/middleware.php ( 0.41 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Pipeline.php ( 2.61 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-trace/src/TraceDebug.php ( 2.94 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/middleware/SessionInit.php ( 1.94 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Session.php ( 1.80 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/session/driver/File.php ( 6.27 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/contract/SessionHandlerInterface.php ( 0.87 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/session/Store.php ( 7.06 KB )
/www/wwwroot/www.shve.cn/app/common/http/middleware/MgAllowMiddleware.php ( 0.86 KB )
/www/wwwroot/www.shve.cn/app/common/http/middleware/BaseMiddleware.php ( 0.29 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-multi-app/src/MultiApp.php ( 7.06 KB )
/www/wwwroot/www.shve.cn/app/soft/config/auth.php ( 81.96 KB )
/www/wwwroot/www.shve.cn/app/soft/config/menu.php ( 80.16 KB )
/www/wwwroot/www.shve.cn/app/soft/config/module.php ( 10.40 KB )
/www/wwwroot/www.shve.cn/app/soft/config/route.php ( 0.05 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Route.php ( 23.25 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/RuleName.php ( 5.31 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/Domain.php ( 5.53 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/RuleGroup.php ( 13.56 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/Rule.php ( 23.18 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/RuleItem.php ( 9.19 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/dispatch/Url.php ( 3.42 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/dispatch/Controller.php ( 6.61 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/route/Dispatch.php ( 6.07 KB )
/www/wwwroot/www.shve.cn/app/soft/controller/IndexController.php ( 11.90 KB )
/www/wwwroot/www.shve.cn/app/common/controller/BaseMgController.php ( 1.72 KB )
/www/wwwroot/www.shve.cn/app/BaseController.php ( 3.04 KB )
/www/wwwroot/www.shve.cn/app/common/logic/ImgLogic.php ( 2.29 KB )
/www/wwwroot/www.shve.cn/app/common/logic/BaseLogic.php ( 1.69 KB )
/www/wwwroot/www.shve.cn/app/common/model/Img.php ( 0.70 KB )
/www/wwwroot/www.shve.cn/app/common/model/BaseModel.php ( 8.26 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/concern/SoftDelete.php ( 5.87 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/connector/Mysql.php ( 4.33 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/PDOConnection.php ( 51.60 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/Connection.php ( 8.79 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/ConnectionInterface.php ( 4.86 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/builder/Mysql.php ( 16.56 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/Builder.php ( 22.26 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/BaseBuilder.php ( 27.29 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/Query.php ( 14.22 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/BaseQuery.php ( 41.20 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/TimeFieldQuery.php ( 7.43 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/AggregateQuery.php ( 3.26 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/ModelRelationQuery.php ( 18.93 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/ParamsBind.php ( 3.66 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/ResultOperation.php ( 6.65 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/Transaction.php ( 2.77 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/WhereQuery.php ( 17.78 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/JoinAndViewQuery.php ( 6.99 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/db/concern/TableFieldInfo.php ( 2.46 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/log/driver/File.php ( 6.17 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/contract/LogHandlerInterface.php ( 0.86 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/log/Channel.php ( 3.88 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/event/LogRecord.php ( 0.86 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-orm/src/model/Collection.php ( 6.65 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-helper/src/Collection.php ( 16.48 KB )
/www/wwwroot/www.shve.cn/app/common/service/FileService.php ( 1.67 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/facade/Cache.php ( 2.06 KB )
/www/wwwroot/www.shve.cn/app/common/logic/ContentConfigLogic.php ( 1.53 KB )
/www/wwwroot/www.shve.cn/app/common/service/ConfigService.php ( 3.26 KB )
/www/wwwroot/www.shve.cn/app/common/logic/ContentCategoryLogic.php ( 3.42 KB )
/www/wwwroot/www.shve.cn/app/common/model/ContentCategory.php ( 0.26 KB )
/www/wwwroot/www.shve.cn/app/common/model/Content.php ( 0.29 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/facade/View.php ( 1.70 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/View.php ( 4.33 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/facade/Request.php ( 9.00 KB )
/www/wwwroot/www.shve.cn/app/common/logic/ArticleLogic.php ( 3.93 KB )
/www/wwwroot/www.shve.cn/app/common/model/Article.php ( 0.24 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-view/src/Think.php ( 8.00 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-template/src/Template.php ( 46.61 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-template/src/template/driver/File.php ( 2.41 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-template/src/template/contract/DriverInterface.php ( 0.86 KB )
/www/wwwroot/www.shve.cn/runtime/soft/temp/3e2967f6c397e759d8f6b3977163d6fa.php ( 9.09 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Response.php ( 8.65 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/response/Html.php ( 0.97 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/framework/src/think/Cookie.php ( 5.97 KB )
/www/wwwroot/www.shve.cn/vendor/topthink/think-trace/src/Html.php ( 4.49 KB )

CONNECT:[ UseTime:0.000932s ] mysql:host=127.0.0.1;port=3306;dbname=shve;charset=utf8mb4
SHOW FULL COLUMNS FROM `mg_img` [ RunTime:0.002194s ]
SELECT `img`.`id`,`img`.`name`,`img`.`category_id`,`img`.`src`,`img`.`href`,`img`.`sort`,`img`.`status` FROM `mg_img` `img` LEFT JOIN `mg_img_category` `category` ON `category`.`id`=`img`.`category_id` WHERE ( `category`.`code` = 'index_logo' ) AND `img`.`delete_time` IS NULL [ RunTime:0.000992s ]
SELECT `img`.`id`,`img`.`name`,`img`.`category_id`,`img`.`src`,`img`.`href`,`img`.`sort`,`img`.`status` FROM `mg_img` `img` LEFT JOIN `mg_img_category` `category` ON `category`.`id`=`img`.`category_id` WHERE ( `category`.`code` = 'footer_wx' ) AND `img`.`delete_time` IS NULL [ RunTime:0.000920s ]
SHOW FULL COLUMNS FROM `mg_content_category` [ RunTime:0.002004s ]
SELECT `id`,`name` FROM `mg_content_category` WHERE `mg_content_category`.`delete_time` IS NULL [ RunTime:0.000597s ]
SHOW FULL COLUMNS FROM `mg_content` [ RunTime:0.002025s ]
SELECT * FROM `mg_content` WHERE ( `category_id` = 1 ) AND `mg_content`.`delete_time` IS NULL [ RunTime:0.000820s ]
SELECT * FROM `mg_content` WHERE ( `category_id` = 2 ) AND `mg_content`.`delete_time` IS NULL [ RunTime:0.000754s ]
SELECT * FROM `mg_content` WHERE ( `category_id` = 3 ) AND `mg_content`.`delete_time` IS NULL [ RunTime:0.000652s ]
SELECT `img`.`id`,`img`.`name`,`img`.`category_id`,`img`.`src`,`img`.`href`,`img`.`sort`,`img`.`status` FROM `mg_img` `img` LEFT JOIN `mg_img_category` `category` ON `category`.`id`=`img`.`category_id` WHERE ( `category`.`code` = 'index_banner' ) AND `img`.`delete_time` IS NULL [ RunTime:0.001050s ]
SHOW FULL COLUMNS FROM `mg_article` [ RunTime:0.002184s ]
UPDATE `mg_article` SET `visit_num` = `visit_num` + 1 WHERE ( `id` = 38 ) AND `mg_article`.`delete_time` IS NULL [ RunTime:0.002328s ]
SELECT `article`.`id`,`article`.`name`,`article`.`content`,`article`.`create_time`,`article`.`visit_num`,`article`.`prise_num`,`article`.`is_show`,`article`.`is_tj`,`u`.`nickname`,`u`.`avatar`,`article`.`is_verify` FROM `mg_article` `article` LEFT JOIN `mg_user` `u` ON `u`.`id`=`article`.`user_id` WHERE ( `article`.`id` = '38' ) AND `article`.`delete_time` IS NULL LIMIT 1 [ RunTime:0.001151s ]

element-plus table el-table 表格，文档

关于我们

买家指南

卖家指南

客服信息