Table:
<template>
<div class="as-details-section">
<span class="title">任務(wù)分解表</span>
<div class="as-detail-list">
<el-table
:data="tableData"
:row-key="getRowKeys"
border
style="width: 100%">
<el-table-column
prop="stageName"
label="階段"
width="120">
</el-table-column>
<el-table-column
prop="taskName"
label="任務(wù)"
width="190">
</el-table-column>
<el-table-column
prop="planStartTime"
label="計劃開始時間"
className="editable"
width="120">
<template slot-scope="{ row, column, $index }">
<table-date-picker
v-if="row.isTask && !row.isDisabled"
v-model="row.planStartTime"
:valueValid="row.planStartTimeValid"
:valueEmpty="row.planStartTimeEmpty"
@change="change(row, column, $index)"
@blur="onBlur(row, column)">
</table-date-picker>
<span v-else class="cell-value">{{row.planStartTime | dateFormat}}</span>
</template>
</el-table-column>
<el-table-column
prop="planEndTime"
label="計劃結(jié)束時間"
className="editable"
width="120">
<template slot-scope="{ row, column, $index }">
<table-date-picker
v-if="row.isTask && !row.isDisabled"
v-model="row.planEndTime"
:valueValid="row.planEndTimeValid"
:valueEmpty="row.planEndTimeEmpty"
isEndDate
@change="change(row, column, $index)"
@blur="onBlur(row, column)">
</table-date-picker>
<span v-else class="cell-value">{{row.planEndTime | dateFormat}}</span>
</template>
</el-table-column>
<el-table-column
prop="actualStartTime"
label="實際開始"
className="editable"
width="120">
<template slot-scope="{ row, column, $index }">
<table-date-picker
v-if="row.isTask && !row.isDisabled"
v-model="row.actualStartTime"
:valueValid="row.actualStartTimeValid"
:valueEmpty="row.actualStartTimeEmpty"
:disabled="row.isActualDisabled"
:pickerOptions="pickerOptions"
@change="changeRealDate(row, column, $index)">
</table-date-picker>
<span v-else class="cell-value">{{row.actualStartTime | dateFormat}}</span>
</template>
</el-table-column>
<el-table-column
prop="actualEndTime"
label="實際結(jié)束"
className="editable"
width="120">
<template slot-scope="{ row, column, $index }">
<table-date-picker
v-if="row.isTask && !row.isDisabled"
v-model="row.actualEndTime"
:valueValid="row.actualEndTimeValid"
:valueEmpty="row.actualEndTimeEmpty"
:disabled="row.isActualDisabled"
:pickerOptions="pickerOptions"
isEndDate
@change="changeRealDate(row, column, $index)">
</table-date-picker>
<span v-else class="cell-value">{{row.actualEndTime | dateFormat}}</span>
</template>
</el-table-column>
<el-table-column
prop="projectWbsTaskResourceList"
label="資源及投入比例"
min-width="200">
<template slot-scope="{ row, column, $index }">
<table-person-picker
v-if="row.isTask && !row.isDisabled"
v-model="row.projectWbsTaskResourceList"
:projectWbsTrackId="row.id"
:valueEmpty="row.projectWbsTaskResourceListEmpty"
@change="percentChange(row, column, $index)"
@blur="onBlur(row, column)"
></table-person-picker>
<span v-else class="cell-value">{{ resourceFormat(row.projectWbsTaskResourceList) }}</span>
</template>
</el-table-column>
<el-table-column
prop="planWorkHour"
label="預計工時（天）"
width="120">
</el-table-column>
<el-table-column
prop="actualWorkHour"
label="實際工時（天）"
width="120">
</el-table-column>
<el-table-column
prop="planWorkDay"
label="預計工期（天）"
width="120">
</el-table-column>
<el-table-column
prop="actualWorkDay"
label="實際工期（天）"
width="120">
</el-table-column>
</el-table>
</div>
<el-dialog
title="流轉(zhuǎn)確認"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="400px">
<el-row v-if="!isShowRollback">確認要流轉(zhuǎn)至下一階段嗎？</el-row>
<el-row v-else>確認要流轉(zhuǎn)至下一階段嗎？</el-row>
<span slot="footer" class="dialog-footer">
<el-button v-if="!isShowRollback" @click="dialogVisible = false">取 消</el-button>
<el-button v-if="isShowRollback" @click="promoteProject(true)">回滾至2分</el-button>
<el-button type="primary" @click="promoteProject()">確 定</el-button>
</span>
</el-dialog>
</div>
</template>TablePersonPicker:
<template>
<div class="table-date-picker">
<div class="cell-content-wrap">
<span class="cell-content">{{displayValue}}</span>
<i
class="el-icon-edit-outline"
style="float: right"
></i>
</div>
</div>
</template>
<script>
import TablePersonPickerDialog from '@/components/projectManagement/TablePersonPickerDialog'
export default {
name: 'TablePersonPicker',
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: Array,
default() {
return [];
}
},
valueValid: {
type: Boolean,
default() {
return true;
}
},
valueEmpty: {
type: Boolean,
default() {
return false;
}
},
disabled: {
type: Boolean,
default() {
return false;
}
},
projectWbsTrackId: {
type: String,
default() {
return null;
}
}
},
data() {
return {
newValue: [],
displayValue: '',
pencentArr: []
};
},
mounted() {
// 點擊表格td，編輯狀態(tài)，輸入框獲取焦點
this.$el.parentNode.parentNode.onclick = () => {
if (!this.disabled) {
this.showDialog();
}
}
},
methods: {
showDialog() {
this.$utils.create(TablePersonPickerDialog, {
context: this,
keyName: this.id,
deliveryDept: this.options,
value: this.value
});
},
confirm(data) {
this.pencentArr = data;
this.displayValue = this.formatDisaplyValue();
this.$emit('change', this.pencentArr);
},
getItemById(personId) {
let item = null;
// 新增人員
for (const obj of this.data) {
if (obj.personId === personId) {
item = obj;
break;
}
}
return item;
},
formatDisaplyValue() {
const displayArr = [];
for (const item of this.pencentArr) {
displayArr.push(`${item.personLabel}(${item.inputPercentage}%)`)
}
return displayArr.join('，');
},
formatOptions() {
const optons = [];
let option = null;
for (const item of this.$store.state.DICT_DATA.delivery_dept) {
option = {
id: item.dictValue,
personLabel: item.dictName,
disabled: true
};
optons.push(option);
}
return optons;
}
},
created() {
this.options = this.formatOptions();
let template = null;
for (const item of this.value) {
this.newValue.push(item.personId);
template = {
personId: item.personId,
projectWbsTrackId: this.projectWbsTrackId,
inputPercentage: item.inputPercentage,
personLabel: item.personLabel
};
this.pencentArr.push(template);
}
this.displayValue = this.formatDisaplyValue();
},
watch: {
valueEmpty() {
if (this.valueEmpty) {
this.$el.parentNode.parentNode.style.background = '#FEF0F0';
} else {
this.$el.parentNode.parentNode.style.background = 'none';
}
},
valueValid() {
if (!this.valueValid) {
this.$el.parentNode.parentNode.style.background = '#FEF0F0';
} else {
this.$el.parentNode.parentNode.style.background = 'none';
}
}
}
};
</script>
<style scoped lang="scss">
.table-date-picker {
display: flex;
flex-flow: row;
align-items: center;
.cell-content-wrap {
display: flex;
flex-flow: row;
align-items: center;
i {
color: #20a0ff;
margin-left: 8px;
cursor: pointer;
}
}
.cell-content {
padding: 0 8px;
flex: 1;
}
}
</style>
輸入校驗：
/**
* 表格預計開始時間和預計結(jié)束時間注冊事件
*/
change(row, column, $index) {
const { property } = column;
const value = row[property];
if ((!value || value === '') && value !== 0) {
row[`${property}Empty`] = true;
} else {
row[`${property}Empty`] = false;
// 時間發(fā)生變化，往下開始計算時間
this.calculatePlanDate(row, column, $index);
// 計算預計工時和預計工期
this.caculatePlanData();
// 任務(wù)預計開始時間小于任務(wù)結(jié)束時間
const isValid = this.validateDate(row.planStartTime, row.planEndTime);
if (!isValid) {
this.$message.error('預計結(jié)束時間必須大于等于預計開始時間！');
}
// 任務(wù)的預計開始時間大于上一個階段的結(jié)束時間
const isStartDateValid = this.validateTaskStartDate(row, property, $index);
if (!isStartDateValid) {
this.$message.error('任務(wù)的預計開始時間和預計結(jié)束時間必須大于上一個階段的預計結(jié)束時間');
}
if (isValid && isStartDateValid) {
row[`${property}Valid`] = true;
} else {
row[`${property}Valid`] = false;
}
this.$set(this.tableData, $index, Object.assign({}, row));
}
},效果圖：
?文章來源地址http://www.zghlxwxcb.cn/news/detail-613068.html
文章來源：http://www.zghlxwxcb.cn/news/detail-613068.html
?
到了這里，關(guān)于Element UI Table實現(xiàn)可編輯表格+校驗（行和行，列和列）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
