Element UI 表格组件使用示例 - 实现可编辑学号列

这段代码使用 Element UI 的 'el-table' 和 'el-table-column' 组件来创建一个表格，并通过属性和插槽来渲染表格内容。

'el-table' 组件的属性包括 ':data'、'border' 和 'style'。':data' 绑定了一个名为 'tableData' 的数据数组，用于渲染表格的行数据；'border' 属性用于显示表格的边框；'style' 属性用于设置表格的宽度为 100%。

'el-table-column' 组件的属性包括 'fixed'、'prop'、'label' 和 'width'。'fixed' 属性用于固定列，即该列会始终显示在可视区域；'prop' 绑定了一个名为 'number' 的数据字段，用于显示或编辑学号；'label' 设置列的标题为'学号'；'width' 设置列的宽度为 100px。

'el-table-column' 组件还通过插槽 'slot-scope="scope"' 来自定义列的内容。在插槽内部使用了 'el-input' 组件和一个 'div' 元素来根据数据的 'editable' 属性来显示学号的输入框或文本。如果数据的 'editable' 属性为 true，则显示一个可编辑的 'el-input' 组件，并将其值绑定到 'scope.row.number' 上；否则显示一个不可编辑的 'div' 元素，并将其内容设置为 'scope.row.number'。