<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);
}
}
}
};