html表格编辑,GitHub - dream2023/ele-table-editor: 基于 element-ui 的表格编辑组件

校检数据

ref="table"

:extraBtns="extraBtns"

:rules="rules"

:columns="columns"

:newColumnValue="newColumnValue"

v-model="tableData"

>

男

女

import EleTableEditor from 'ele-table-editor'

import { InputNumber } from 'element-ui'

export default {

components: {

EleTableEditor

},

data() {

return {

// 表格数据

tableData: [

{

grade: '三年级二班',

name: '小张',

sex: '男',

tuition: 2000,

unPay: 100,

status: 0,

dream: ''

}

],

newColumnValue: {

grade: '三年级二班',

status: 1

},

// 校检规则

rules: {

name: [{ required: true, message: '姓名必填' }],

tuition: { required: true, message: '已缴纳金额必填' }

},

// 其它按钮

extraBtns: [

{

// text 按钮显示的文本

text: '关联',

// 按钮的属性

attrs: {

type: 'text'

},

style: {

color: '#303133'

},

// click事件

click(scope) {

/* eslint-disable */

console.log(scope)

}

}

],

// 表格列

columns: [

{

// el-table-column 的属性

type: 'index'

},

{

// el-table-column 的属性

prop: 'grade',

label: '年级',

// 支持 显示隐藏

vif: true

},

{

prop: 'name',

label: '姓名',

// 支持显示隐藏为 函数

vif(tableData) {

return true;

},

// 当有 content 属性时, 可以指定相应的组件

content: {

// type 可以为全局注册的组件名或者组件引用

type: 'el-input',

// attrs 是组件的属性

attrs: {

placeholder: '学员姓名'

},

change(val, row, index) {

console.log(val, row, index)

},

// 此外还有

// style: {}, // 组件的样式

// class: {}, // 组件的class

// on: {}, // 组件的事件

// slots: {}, // 插槽

// scopedSlots: {}, 作用域插槽

}

},

{

prop: 'sex',

label: '性别'

},

{

label: '缴费',

width: 400,

// content 可以为数组

content: [

'已缴纳: ', // 数组可以是 组件 和 普通字符串 混用

{

type: 'el-input',

valueKey: 'tuition', // 当content为数组时, 必须制定组件绑定的 tableData 的 key

// 支持 attrs 为函数

attrs(scope, tableData){

console.log(scope, tableData)

return {

disabled: scope.$index === 2 ? true : false

}

},

style: {

width: '100px',

marginRight: '10px'

}

},

'未缴纳: ',

{

type: 'el-input',

valueKey: 'unPay', // 这里也需要绑定 key

style: {

width: '100px'

}

}

]

},

{

prop: 'dream',

label: '梦想',

content: {

type: 'el-radio-group',

// 对于 el-select, el-checkbox-group, el-radio-group 三个组件

// 可以指定 options 数组进行选项的渲染

options: [

// option 的值可以为对象

// 此处对以上三个组件做了封装, 显示的key为 text, 值key为 value

{ text: '科学家', value: 'scientist' },

{ text: '警察', value: 'policeman' },

// 也可以指定为字符串, 则会转化为 '程序员' => { text: '程序员', value: '程序员' }

'程序员'

]

}

},

{

prop: 'birthplace',

label: '籍贯',

content: {

type: 'el-select',

// 如果 key 不是 text 和 value

// 可以使用 prop 指定 key

options: [

{ name: '北京', id: 'beijing' },

{ name: '上海', id: 'shanghai' },

{ name: '广州', id: 'guangzhou' }

],

// prop 将 text 对应 name, value 对应 id

prop: {

text: 'name',

value: 'id'

}

}

},

{

prop: 'status',

label: '状态',

// 通过 options 将枚举值转为文本

options: {

0: '禁用',

1: '正常',

2: '异常'

}

}

]

}

},

methods: {

// 校检数据

handleCheck() {

this.$refs['table'].validate().catch(({ errors, fields }) => {

console.log(errors, fields)

})

}

}

}