{{ scope.$index + 1 }}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {{ scope.row.goodsCount }}
+
+
+
+
+
+
+ {{ scope.row.goodsPrice }}
+
+
+
+
+
+
+ {{ scope.row.remark }}
+
+
export default {
name: "StTable",
- props:{
- partList:{
+ props: {
+ partList: {
type: Array,
defaultValue: false,
required: true
@@ -39,17 +61,152 @@ export default {
return {
loading: false,
list: [],
+ // 需要合计的属性
+ includeColumn: ['goodsCount', 'totalPrice'],
+ // 需要编辑的属性
+ editProp: ['goodsCount', 'goodsPrice', 'remark'],
+ // 保存进入编辑的cell
+ clickCellMap: {}
}
},
+ watch: {
+ partList(val) {
+ if (val && val.length > 0) {
+ const data = val[val.length - 1]
+ const newData = {
+ ...data,
+ goodsCount: 1,
+ totalPrice: data.price * 1,
+ remark: '',
+ goodsPrice: data.price,
+ }
+ this.list.push(newData)
+ } else {
+ this.list = []
+ }
+ },
+ list: {
+ handler(val) {
+ this.$emit("tableData", val)
+ },
+ deep: true
+ },
+ },
methods: {
// 通知父组件，删除元素
- deleteItem(index){
+ deleteItem(index) {
this.$emit("deleteItem", index)
+ },
+ getSummaries(param) {
+ const {columns, data} = param
+ const sums = []
+ columns.forEach((column, index) => {
+ if (index === 0) {
+ sums[index] = '合计';
+ return;
+ }
+ const values = data.map(item => Number(item[column.property]));
+ if (this.includeColumn.includes(column.property)) {
+ sums[index] = values.reduce((prev, curr) => {
+ const value = Number(curr);
+ if (!isNaN(value)) {
+ return prev + curr;
+ } else {
+ return prev;
+ }
+ }, 0);
+ sums[index];
+ }
+ });
+ return sums
+ },
+ /** 鼠标移入cell */
+ handleCellEnter(row, column, cell, event) {
+ const property = column.property
+ if (this.editProp.includes(property)) {
+ cell.querySelector('.item__txt').classList.add('item__txt--hover')
+ }
+ },
+ /** 鼠标移出cell */
+ handleCellLeave(row, column, cell, event) {
+ const property = column.property
+ if (this.editProp.includes(property)) {
+ cell.querySelector('.item__txt').classList.remove('item__txt--hover')
+ }
+ },
+ /** 点击cell */
+ handleCellClick(row, column, cell, event) {
+ const property = column.property
+ if (this.editProp.includes(property)) {
+ // 保存cell
+ this.saveCellClick(row, cell)
+ cell.querySelector('.item__txt').style.display = 'none'
+ cell.querySelector('.item__input').style.display = 'inline'
+ cell.querySelector('input').focus()
+ }
+ },
+ /** 取消编辑状态 */
+ cancelEditable(cell) {
+ cell.querySelector('.item__txt').style.display = 'inline'
+ cell.querySelector('.item__input').style.display = 'none'
+ },
+ /** 保存进入编辑的cell */
+ saveCellClick(row, cell) {
+ const id = row.id
+ if (this.clickCellMap[id] !== undefined) {
+ if (!this.clickCellMap[id].includes(cell)) {
+ this.clickCellMap[id].push(cell)
+ }
+ } else {
+ this.clickCellMap[id] = [cell]
+ }
+ },
+ /** 保存数据 */
+ save (row) {
+ // 更新表格的数据
+ row.totalPrice = row.goodsCount * row.goodsPrice
+ const id = row.id
+ // 取消本行所有cell的编辑状态
+ this.clickCellMap[id].forEach(cell => {
+ this.cancelEditable(cell)
+ })
+ this.clickCellMap[id] = []
}
}
}