table.md
12.1 KB
Table 表格
拓展ElementUI的el-table
配置项
可以通过配置项列表快速生成表格列
::: snippet 设置columns配置表格列，插槽header-列字段名可自定义表头的内容，插槽cell-列字段名可自定义列单元格的内容。
<template>
<z-table :data="tableData" border size="small" :columns="columns">
<template #header-age>年龄 <i class="el-icon-question"></i></template>
<template #cell-gender="{ value }">
<el-tag size="mini">{{ value }}</el-tag>
</template>
</z-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: '31', gender: '男' },
{ name: '李四', age: '27', gender: '女' },
{ name: '王五', age: '16', gender: '男' },
],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' },
]
};
},
}
</script>
:::
追加列
使用配置项时，可以在配置项的左右两边追加列
::: snippet 使用left插槽在表格配置项的左侧插入列，使用right插槽在表格配置项的右侧插入列。
<template>
<z-table :data="tableData" border size="small" :columns="columns">
<template #prepend>
<el-table-column type="selection" width="40"></el-table-column>
</template>
<template #left>
<el-table-column label="左侧的列">
<template #default="{ $index }">
左侧内容 {{ $index }}
</template>
</el-table-column>
</template>
<template #right>
<el-table-column label="右侧的列">
<template #default="{ $index }">
右侧内容 {{ $index }}
</template>
</el-table-column>
</template>
<template #append>
<el-table-column label="后置列" width="80">
<template #default>
<el-button type="text">编辑</el-button>
</template>
</el-table-column>
</template>
</z-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: '31', gender: '男' },
{ name: '李四', age: '27', gender: '女' },
{ name: '王五', age: '16', gender: '男' },
],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' },
]
};
},
}
</script>
:::
可编辑表格（即将废弃）
由于创建时间较早且性能不佳，在2.0.1版本之后不推荐使用，并在若干版本之后废弃
一般用于表格的静态数据编辑，设置editable开启可编辑模式，设置clickable开启双击编辑
::: snippet 编辑功能只支持通过columns配置的列，editable设置该列是否可编辑，默认开启；插槽editor-列字段名可自定义列单元格的编辑器，通过解构作用域插槽获取的value和onInput改变表格的绑定值，不支持直接写v-model。
<template>
<div>
<z-form span="6">
<z-form-item>编辑模式：<el-switch v-model="editable"></el-switch></z-form-item>
<z-form-item>编辑全部：<el-switch v-model="editall"></el-switch></z-form-item>
<z-form-item>双击编辑：<el-switch v-model="clickable"></el-switch></z-form-item>
</z-form>
<z-table v-model="tableData" size="mini" :editable="editable" :columns="columns" border :clickable="clickable" @cell-edit-confirm="onCellEditConfirm" :editall="editall">
<template #editor-gender="{ value, onInput, index }">
<el-radio-group size="mini" :value="value" @input="onInput">
<el-radio-button label="男">男</el-radio-button>
<el-radio-button label="女">女</el-radio-button>
</el-radio-group>
</template>
<template #cell-gender="{ value }">
<el-tag size="mini" type="info" disable-transitions>{{ value }}</el-tag>
</template>
<el-table-column label="操作" width="80">
<template #default="{ $index }">
<el-button type="text" @click="deleteRow($index)">删除</el-button>
</template>
</el-table-column>
</z-table>
</div>
</template>
<script>
export default {
data() {
return {
editall: false,
editable: true,
clickable: true,
tableData: [
{ name: '张三', age: 31, gender: '男', remark: '' },
{ name: '李四', age: 27, gender: '女', remark: '' },
{ name: '王五', age: 16, gender: '男', remark: '' },
],
columns: [
{ prop: 'name', label: '姓名', editable: false },
{ component: 'el-input-number', prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' },
{ prop: 'remark', label: '备注' },
]
};
},
methods: {
deleteRow(index) {
this.tableData.splice(index, 1);
},
onCellEditConfirm(data) {
console.log(data);
}
}
}
</script>
:::
编辑器
表格单元格可通过editor参数来配置编辑器，默认与表格数据值双向绑定
::: snippet 设置items配置编辑器列
<template>
<div>
<div>{{ tableData }}</div>
<z-table :data="tableData" border size="small" :columns="columns" :editor="editor" />
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: '31', gender: '男' },
{ name: '李四', age: '27', gender: '女' },
{ name: '王五', age: '16', gender: '男' },
],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' },
],
editor: {
items: [
{ is: 'el-input', prop: 'name', attrs: { placeholder: '请输入' }, props: { size: 'mini', clearable: true } },
{ is: 'el-input-number', prop: 'age', attrs: { style: 'width: 100%' }, props: { size: 'mini', clearable: true } },
]
}
};
},
}
</script>
:::
编辑器对象取值与赋值
编辑器可对深层对象进行双向绑定，通过deep参数来配置
::: snippet 表格配置项也支持对象的深层取值
<template>
<div>
<div>{{ tableData }}</div>
<z-table :data="tableData" border size="small" :columns="columns" :editor="editor" />
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', info: { age: 27, gender: '女', district: { city: '上海市' } } },
{ name: '李四', info: { age: 19, gender: '男', district: { city: '北京市' } } },
],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'info.age', label: '年龄' },
{ prop: 'info.gender', label: '性别' },
],
editor: {
deep: true,
items: [
{ is: 'el-input', prop: 'name', attrs: { placeholder: '请输入' }, props: { size: 'mini', clearable: true } },
{ is: 'el-input-number', prop: 'info.age', attrs: { style: 'width: 100%' }, props: { size: 'mini', clearable: true } },
]
}
};
},
}
</script>
:::
编辑器条件渲染
编辑器支持通过行内的某些数值来进行条件渲染，支持配置if来进行条件渲染。
::: snippet if同时支持boolean和function两种类型，其中function可拿到当前行数据
<template>
<z-table :data="tableData" border size="small" :columns="columns" :editor="editor" />
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', info: { age: 27, gender: '女', district: { city: '上海市' } } },
{ name: '李四', info: { age: 19, gender: '男', district: { city: '北京市' } } },
],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'info.age', label: '年龄' },
{ prop: 'info.gender', label: '性别' },
],
editor: {
deep: true,
items: [
{ is: 'el-input', prop: 'name', attrs: { placeholder: '请输入' }, props: { size: 'mini', clearable: true }, if: ({ row, index }) => index > 0 },
{ is: 'el-input-number', prop: 'info.age', attrs: { style: 'width: 100%' }, props: { size: 'mini', clearable: true }, if: false },
]
}
};
},
}
</script>
:::
编辑器条件渲染扩展
除了if之外，props、attrs、on都支持条件渲染
::: snippet 同时支持boolean和function两种类型，其中function可拿到当前行数据
<template>
<z-table :data="tableData" border size="small" :columns="columns" :editor="editor" />
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '', info: { age: 18, gender: '女', district: { city: '上海市' } } },
{ name: '', info: { age: 27, gender: '男', district: { city: '北京市' } } },
],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'info.age', label: '年龄' },
{ prop: 'info.gender', label: '性别' },
],
editor: {
deep: true,
items: [
{ is: 'el-input', prop: 'name', attrs: ({ row }) => ({ placeholder: '请输入' + (row.info.gender === '女' ? 'MM' : 'GG') + '的姓名' }), props: { size: 'mini', clearable: true } },
{ is: 'el-input', prop: 'info.age', props: ({ row }) => (row.info.gender === '女' ? { size: 'mini', disabled: true } : { size: 'mini', clearable: true }) },
]
}
};
},
}
</script>
:::
编辑器校验
编辑器默认支持el-form的单元格校验，配置editor参数中的validate开启校验模式，配置editor参数中的path设置当前表格在form表单中的路径，表头会根据rules自动判断是否必填项追加*号
::: snippet 配置编辑器editor下的rules设置单元格的校验规则，也可以在items的rules中配置用以支持条件渲染
<template>
<el-form ref="form" :model="form">
<el-form-item label="ID" prop="id">
<el-input :value="form.id" type="text" disabled />
</el-form-item>
<z-table :data="form.list" border size="small" :columns="columns" :editor="editor" />
<el-form-item>
<el-button size="mini" @click="handleValidate">校验</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
id: 'test',
list: [
{ name: '', age: 18, gender: '女', },
{ name: '', age: 27, gender: '男' },
]
},
columns: [
{ prop: 'name', label: '姓名', showOverflowTooltip: true },
{ prop: 'age', label: '年龄', showOverflowTooltip: true },
{ prop: 'gender', label: '性别', showOverflowTooltip: true },
],
editor: {
path: 'list',
validate: true,
rules: {
name: [{ required: true, message: '请输入姓名' }],
},
items: [
{ is: 'el-input', prop: 'name', attrs: { placeholder: '请输入姓名' }, props: { size: 'mini', clearable: true } },
{
is: 'el-input',
prop: 'age',
props: { size: 'mini', clearable: true },
rules: ({ row = {} }) => {
if (row.gender === '女') {
return [{
validator: (rule, value, callback) => {
if (value < 14) {
callback(new Error('还年轻'));
}
if (value > 18) {
callback(new Error('永远18岁'));
}
callback();
},
}];
} else {
return [{ required: true, message: '请输入年龄' }]
}
}
},
]
}
};
},
methods: {
handleValidate() {
this.$refs.form.validate(valid => {
if (valid) {
this.$message.success('校验通过');
} else {
this.$message.error('校验失败');
}
});
}
}
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- data | 表格数据 | Array | - | - columns | 表格列配置 | Array | - | [] editor | 编辑器配置 | Object | - | -