# 单元格编辑功能
- 10条/页
- 20条/页
- 50条/页
- 100条/页
无数据
在组件中需配置
column 某项需要编辑先设置属性：canEdit:true
column 中configEdit属性操作可编辑的是输入框/下拉选择/日期选择等:
label: placeholder 显示
editSlotName: 自定义编辑组件作用域插槽方式
editComponent :组件名称可直接指定全局注册的组件（默认是'el-input'），也可引入'element/abtd'如：'a-input/el-input'
bind: 第三方 UI 的 Attributes，如 el-input 中的 clearable 清空功能
event: 触发 handleEvent 事件的标志
type: 下拉或者复选框显示（select-arr/select-obj）
list: 下拉选择数据源名称
arrLabel: type:select-arr 时对应显示的中文字段
arrKey: type:select-arr 时对应显示的数字字段
<template>
<div class="t-table-single-edit-cell" style="width:100%;">
<t-table
:table="singleEditConfig.table"
:columns="singleEditConfig.table.columns"
:listTypeInfo="singleEditConfig.listTypeInfo"
@handleEvent="handleEvent"
@save="singleSave"
>
<!-- 自定义单元格编辑组件(多选下拉选择) -->
<template #editHobby="{scope}">
<el-select v-model="scope.row[scope.column.property]" multiple>
<el-option
v-for="item in singleEditConfig.listTypeInfo.hobbyList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
<!-- 自定义单元格编辑组件（自动完成） -->
<template #autocomplete="{scope}">
<el-autocomplete
clearable
:debounce="0"
class="inline-input"
v-model="scope.row[scope.column.property]"
:fetch-suggestions="querySearch"
@clear="clearSelect"
placeholder="请输入内容"
></el-autocomplete>
</template>
</t-table>
</div>
</template>
<script>
export default {
name: 'TtableSingleEditCell',
data() {
return {
// 编辑某个单元格
singleEditConfig: {
table: {
border: true,
firstColumn: { type: 'index', label: '序列' }, // 显示序列号
data: [
{
name: '张三',
hobby: '1',
hobby1: ['1', '2'],
hobby2: ['1', '2'],
autocomplete: '三全鲜食（北新泾店）',
year: '2022',
time: '2022-01-18 16:58:58',
remake: '备注张三',
number: 12
},
{
name: '李四',
hobby: '2',
hobby1: ['0', '2'],
hobby2: ['0', '2'],
autocomplete: '三全鲜食（北新泾店）',
year: '2021',
time: '2022-01-19 16:58:58',
remake: '备注李四',
number: 15
}
],
columns: [
{
prop: 'name',
label: '姓名',
minWidth: '100',
canEdit: true,
renderHeader: (row) => {
const style = {
color: '#F56C6C',
fontSize: '16px',
marginRight: '3px'
}
return (
<div>
<span style={style}>*</span>
<span>{row.label}</span>
</div>
)
}
},
{
prop: 'remake',
label: '输入框',
minWidth: '220',
canEdit: true,
configEdit: {
label: '备注',
append: '吨',
rules: { required: true, message: '请输入备注', trigger: 'blur' },
bind: { 'prefix-icon': 'el-icon-search' },
editComponent: 'el-input'
}
},
{
prop: 'hobby',
label: '爱好单选',
minWidth: '180',
headerRequired: true,
canEdit: true,
configEdit: {
label: '爱好单选',
type: 'select-arr',
editComponent: 'el-select',
list: 'hobbyList',
event: 'hobbyList',
arrLabel: 'label',
arrKey: 'value'
}
},
{
prop: 'hobby1',
label: '编辑组件插槽',
minWidth: '180',
renderHeader: (row) => {
return (
<div>
<span>{row.label}</span>
<i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
</div>
)
},
canEdit: true,
configEdit: {
label: '编辑组件插槽',
type: 'el-select-multiple',
editComponent: 'el-select',
editSlotName: 'editHobby'
}
},
{
prop: 'autocomplete',
label: '自动完成',
minWidth: '180',
canEdit: true,
configEdit: {
label: '自动输入完成',
// type: 'el-select-multiple',
editComponent: 'el-autocomplete',
editSlotName: 'autocomplete'
}
},
{
prop: 'year',
label: '日期年',
minWidth: '180',
canEdit: true,
configEdit: {
label: '日期年',
type: 'year',
editComponent: 'el-date-picker',
bind: { valueFormat: 'yyyy' }
}
},
{
prop: 'time',
label: '日期时间',
minWidth: '180',
canEdit: true,
configEdit: {
label: '日期时间',
type: 'datetime',
editComponent: 'el-date-picker',
bind: {
valueFormat: 'yyyy-MM-dd hh:mm:ss'
}
}
},
{
prop: 'number',
label: '计数器',
minWidth: '220',
canEdit: true,
configEdit: {
label: '计数器',
type: 'inputNumber',
bind: { min: 0, max: 99 },
editComponent: 'el-input-number'
}
},
{
prop: 'remake',
label: '备注',
minWidth: '220',
canEdit: true,
configEdit: {
label: '备注',
type: 'textarea',
bind: { type: 'textarea' },
editComponent: 'el-input'
}
}
],
// 表格内操作列
operator: [
{
type: 'danger',
text: '删除',
fun: this.editDel
}
]
},
// 下拉选择项
listTypeInfo: {
hobbyList: [
{ label: '吉他', value: '0' },
{ label: '看书', value: '1' },
{ label: '美剧', value: '2' },
{ label: '旅游', value: '3' },
{ label: '音乐', value: '4' }
]
},
autoOption: [
{ 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
{ 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
{ 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
{ 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
{ 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
{ 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
{ 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
{ 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
{ 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' }
]
}
}
},
methods: {
/**
* 自动完成组件
*/
querySearch(queryString, cb) {
var restaurants = this.singleEditConfig.autoOption
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
// clearable清除事件事件
clearSelect() {
// 主要代码
// this.$refs.parentCom.activated = true
// document.activeElement获得了DOM中被聚焦的元素；.blur()取消聚焦
document.activeElement.blur()
this.$forceUpdate()
},
singleSave(data) {
console.log('单个单元格编辑保存', data)
},
editDel(item, index, row) {
row.splice(index, 1)
console.log('删除', item, row, index)
},
// 编辑每一项的change事件
handleEvent(type, val) {
console.log('handleEvent', type, val)
}
}
}
</script>
显示代码
wocwin微信二维码