vxe-table 可编辑表格 行内编辑以及验证 element-UI集成

Posted 2020-11-16 sky-zky

<vxe-table

border

show-overflow

ref="xTable"  --------------------------------------------------------------------------------------------可根据此变量控制表格内容

class="vxe-table-element"

height="600"

:data="tableData"--------------------------------------------------------------------------------------表格绑定数据来源

:edit-rules="validRules"------------------------------------------------------------------------------验证规则（可不写--则行内不验证）

@cell-dblclick="dbclickFun"-------------------------------------------------------------------------单元格双击触发方法（可不写）

@edit-closed="saveFun"-----------------------------------------------------------------------------编辑状态关闭触发方法（可不写）

highlight-current-row-----------------------------------------------------------------------------------选中当前行高亮（可不写）

:edit-config="{trigger: ‘dblclick‘, mode: ‘row‘, showStatus: true,autoClear:onedit}"-----编辑设置（双击触发（可改成单击事件 或不写 手动触发），行事件（也可写成cell 则为单元格事件），显示状态，自动清除状态）

>

<vxe-table-column type="index" width="80">

<template v-slot:header="{ column }">

<span>序号</span>

<i class="el-icon-question"></i>

</template>

</vxe-table-column>

<vxe-table-column

field="name"

title="ElInput"

min-width="140"

:edit-render="{type: ‘default‘}"

>

<template v-slot:edit="scope">

<el-input v-model="scope.row.name" @input="$refs.xTable.updateStatus(scope)"></el-input>

</template>

</vxe-table-column>

<vxe-table-column field="age" title="ElInputNumber" :edit-render="{type: ‘default‘}">

<template v-slot:header="{ column }">

<span>{{ column.title }}</span>

<i class="el-icon-warning"></i>

</template>

<template v-slot:edit="{ row }">

<el-input-number v-model="row.age" :max="35" :min="18"></el-input-number>

</template>

</vxe-table-column>

<vxe-table-column field="sex" title="ElSelect" width="140" :edit-render="{type: ‘default‘}">

<template v-slot:edit="scope">

<el-select v-model="scope.row.sex" @change="sexupda(scope)">

<!--可以使用change事件进行属性间的控制-->

<el-option

v-for="item in sexList"

:key="item.value"

:label="item.label"

:value="item.value"

></el-option>

</el-select>

</template>

<template v-slot="{ row }">{{ getSelectLabel(row.sex) }}</template>

</vxe-table-column>

<vxe-table-column field="date" title="ElDatePicker" :edit-render="{type: ‘default‘}">

<template v-slot:edit="{ row }">

<el-date-picker

v-model="row.date"

type="date"

format="yyyy/MM/dd"

@change="dateupda(scope)"

></el-date-picker>

</template>

<template v-slot="{ row }">{{ formatDate(row.date, ‘yyyy/MM/dd‘) }}</template>

</vxe-table-column>

<vxe-table-column field="date1" title="ElDatePicker" :edit-render="{type: ‘default‘}">

<template v-slot:edit="{ row }">

<el-date-picker v-model="row.date1" type="datetime" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

</template>

<template v-slot="{ row }">{{ formatDate(row.date1, ‘yyyy-MM-dd HH:mm:ss‘) }}</template>

</vxe-table-column>

<vxe-table-column field="date2" title="ElTimePicker" :edit-render="{type: ‘default‘}">

<template v-slot:edit="{ row }">

<el-time-select

v-model="row.date2"

:picker-options="{start: ‘08:30‘, step: ‘00:15‘, end: ‘18:30‘}"

></el-time-select>

</template>

</vxe-table-column>

<vxe-table-column field="rate" title="ElRate" :edit-render="{type: ‘visible‘}">

<template v-slot:edit="{ row }">

<el-rate v-model="row.rate"></el-rate>

</template>

</vxe-table-column>

<vxe-table-column field="describe" title="描述" :edit-render="{type: ‘default‘}">

<template v-slot:edit="scope">

<el-input v-model="scope.row.describe" @input="$refs.xTable.updateStatus(scope)"></el-input>

</template>

</vxe-table-column>

<vxe-table-column label="操作" width="100">

<template v-slot="scope">

<el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>

</template>

</vxe-table-column>

</vxe-table>

export default {

data() {

//自定义校验方法

const validatePass = (rule, value, callback) => {

if (value == "" || value == null) {

callback(new Error("good"));

} else {

callback();

}

};

return {

onedit: false,

regionList: [],

tableData: [],

sexList: [{ value: "0", label: "男" }, { value: "1", label: "女" }],

//验证和正常表单一样

validRules: {

name: [

{ required: true, message: "app.body.valid.rName" },

{ min: 3, max: 50, message: "名称长度在 3 到 50 个字符" }

],

sex: [{ required: true, message: "性别必须填写" }],

describe: [

{

validator: validatePass //自定义校验方法

}

]

}

};

},

methods: {

//新增数据

insertEvent(row) {

let record = {

sex: "1",

date: new Date(),

date1: new Date(),

name: "new",

describe: "GOOD"

};

this.$refs.xTable.insertAt(record, row);----------------------------------------------------------新增一行数据

// .then(({ row }) => this.$refs.xTable.setActiveCell(row, "sex"));--------------------------设置行处于编辑状态（设定焦点所在）

},

//单元格双击事件

dbclickFun(cell) {

this.onedit = false;

},

//保存数据

saveFun() {

var nowdata = this.$refs.xTable.getCurrentRow();-------------------------------------------获取当前行数据

if (nowdata != null) {

//走保存

alert(nowdata);

}

},

//下拉框改变

sexupda(scopevalue) {

scopevalue.row.describe = "改了改了";---------------------------------------------------------可更改其它内容

//this.onedit=true;

this.$refs.xTable.updateStatus(scopevalue);--------------------------------------------------更新状态

},

//时间框改变

dateupda(scopevalue) {

//this.onedit=true;

},

//格式化时间类型

formatDate(value, format) {

if (value != null && value != "") {

return this.$utils.dateToString(value, format);

}

},

//下拉框回显内容

getSelectLabel(value) {

let result = "";

if (value == "1") {

result = "女";

} else {

result = "男";

}

return result;

},

removeEvent(row) {

if (row.id) {---------------------------------------------------------------------实际应用时，可判断其它行属性（删除实际数据--走后台删除  删除临时数据则remove）

MessageBox.confirm("确定删除该数据?", "温馨提示", {

confirmButtonText: "确定",

cancelButtonText: "取消",

type: "warning"

})

.then(() => {

this.$refs.xTable.remove(row);

})

.catch(e => e);

} else {

this.$refs.xTable.remove(row);

}

}

}

};