iviewの編集可能なテーブルデータがデフォルト値に入力されていません

過去数日間、ブロガーはiviewのテーブルを編集可能にする必要に遭遇しました。このブロガーは、前回のブログでそれをすでに認識しています。知りたい場合は、最後のブログにアクセスできます。私のブログは主にユーザーが不注意でデフォルト値を入力しない場合にデフォルト値を指定する方法を共有し
ましょう。まず、関連オブジェクトのデータ情報を表示します。
サイモン
これは、通常のデータデータ配列と行データ配列です。
サイモン
このオブジェクトは、行を見つけるために使用されます列データを使用して、
このオブジェクトのデータを誰もが理解できるように表示します

		/**
         * 编辑单元格数据
         */
        editCellData(row, column, index) {
            this.selectedCell.rowIndex = index;
            this.selectedCell.columnIndex = column.slot;
        },

これは、渡された対応するデータを編集するためのクリックです!

次にテーマを入力してください:

ここでは3つの方法を提供します。

1.それらすべてを0に割り当てる最も簡単な方法(私はこの方法で詳細に記述しませんが、誰もがそうすると思います)

2.分割割り当て方式。実際、この方式は以前の方式に基づいており、特定の改善が行われています。

for (let index = 0; index < this.tableData.length; index++) {
                const element = this.tableData[index];
                if (this.tableData[index].pfysje == '' || this.tableData[index].pfysje == null) {
                    this.tableData[index].pfysje = 0
                }
                if (this.tableData[index].ysje == '' || this.tableData[index].ysje == null) {
                    this.tableData[index].ysje = 0
                }
                if (this.tableData[index].wcgcl == '' || this.tableData[index].wcgcl == null) {
                    this.tableData[index].wcgcl = 0
                }
                if (this.tableData[index].bfje == '' || this.tableData[index].bfje == null) {
                    this.tableData[index].bfje = 0
                }
            }

ここでは、ループを巧みに使用して列をソートしてから判断します。この方法はコードの量を制御するためのものであり、他に利点はありません。

3.ランクを巧みに使用して、処理する特定の要素を見つける

このメソッドは、私の上のselectedCellオブジェクトの行と列のプロパティを使用します!
			let columnData = this.selectedCell.columnIndex;
            let rowData = this.selectedCell.rowIndex;
            if (this.tableData[rowData][columnData] == null || this.tableData[rowData][columnData] == '') {
                this.tableData[rowData][columnData] = 0;
            }

行と列を介して特定の値を定義し、値を介して編集する特定のデータを検索して、データが空であると判断できます。空の場合は、デフォルト値の操作を割り当てます!この方法は完璧ですか?最適化!
実際、レンダーを使用してこの機能を実現することもできますが、これは私の機能コンポーネントには適用できません。

		{
                        title: 'Age',
                        key: 'age',
                      render:(h,params)=>{
                        if(params.row.age ==null || params.row.age ==''){
                          return h('td',{
                            style:{
                              borderRight:'none'
                            }
                          },0);
                        }else{
                          return h('td',{
                            style:{
                              borderRight:'none',
                              textAlign: 'center'
                            }
                          },params.row.age)
                        }
                      }
                    },

このtdには右の境界があり、その後重複するため、ここで右の境界を削除しました。このレンダーはデフォルト値の操作を実装できます。また、試すこともできます。テーブルの値を変更する必要がない場合は、恐れてください。インターフェイスからnull値を取り出してそのような処理を行った後、このレンダリングの方が便利だと思います。どの方法を選択しますか?

公開された34元の記事 ウォンの賞賛0 ビュー3634

おすすめ

転載: blog.csdn.net/qq_43469899/article/details/103526410