A brief summary of some small problems encountered in the daily development of iView,
Today, let's talk about the experience of using iView cascade selector Cascader:

[reference: iView ]

1. Existing problems:

When the cascade selector echo data, it will load slowly and the corresponding time is not timely. The amount of data is slightly larger, which will affect the customer's sense of experience.

Analyze the problem: it is not the time length affected by the interface request and many loop traversals, but the echo mechanism of cascade selector of cascade cascade cascade.

2. Code:

a. Basic properties:

data() {
    return {
      tableLoading: false,
      columns: [
        {
          title: "strategy",
          align: "center",
          slot: "strategyItem",
          minWidth: 300,
        },
      ],
      tableList: [
        {
          keyword: "other",
          strategyItem: [],
        },
      ],
      showList: false,
      configObj: {
        keyword: "",
        strategyName: "",
        operator: "CM",
        strategyType: "2", 
        strategyChannelDetails: [],
        id: "",
        strategyItem: [],
      },
      strategyChannelList: [],
      operatorList: [],
      data: [],
    
    };
  },

b. Get table data tableList

 getConfig(configId) {
      this.tableLoading=true;
      this.$axios
        .request({
          url: "/XXy/",
          method: "get",
          params: {
            id: configId,
          },
        })
        .then(
          (res) => {
            if (res.data.code === 0) {
              let {
                strategyName,
                operator,
                strategyType,
                strategyChannelDetails,
                id,
              } = res.data.data;

              this.configObj = {
                strategyName,
                operator,
                strategyType,
                strategyChannelDetails,
                id,
              };

              this.getstrategyItemList(this.configObj.operator);
              let arr = this.configObj.strategyChannelDetails.map((item) => {
                return {
                  keyword: item.keyword,
                  strategyItem: [item.type, item.strategyItemId + ""],
                  strategyName: (item.type==='0'?"single":(item.type==='1'?"Sub Province":" "))+" / "+item.strategyItemName,
                };
              });

              arr.length && (this.tableList = arr);
            this.tableLoading=false;
            } else {
              this.$Message.error(res.data.data);
            this.tableLoading=false;
            }
            this.disabled = true;
          },
          (err) => {
            this.$Message.error("Failed to get data");
            this.tableLoading=false;
          }
        );
    },

c. Get dictionary data

d. Insert component Cascader into table

 <template slot-scope="{ row, index }" slot="strategyItem">
        <Cascader v-if="showList"
          :data="data"
          :key="'strategyItem-' + index"
          clearable
          transfer
          @on-change="
            (value, selectedData) => {
              changeRowData(index, row, value, selectedData);
            }
          "
          v-model="row.strategyItem"
        ></Cascader>
        <Input v-if="!showList"
          :key="'strategyName-' + index"
          transfer   
          v-model="row.strategyName"
          @mouseover.native="changeList()"
        ></Input>
  </template> 

e. Bind the obtained dictionary data to the Cascader. Because the data rendered and bound by the Cascader component is data of tree array type, the dictionary data is an array that conforms to the example on the official website.

The strategyItem of tableList is also an array, just an array of filtered type and attribute objects. This is only to echo the values in the dictionary data through its own index and corresponding attributes in the table during echo.

In this process, the problem of slow data loading will occur. Many methods have been tried, and some solutions are useful, but not reasonable and accurate.

Finally, we continued to explore, and came to a wave shift, change the shape and shadow, steal the sky and change the day, and perfectly solve such problems.

3. Solution:

When entering the page: bind the filtered data to Input Input box. When you need to modify or click the input box,
Let it cascade components Cascader Show it.
because Cascader You can't echo variables directly, but give filtered data to
input You can't add data through cascade drop-down modification. The two switches perfectly make up for each other's shortcomings and solve the problem of slow response.
The difference between the cascade component and the input box is only the icon at the back. We can quietly solve it by moving the mouse in and enjoy the silkiness.

The mouse in event is used here
mouseover
Using mouseover in vue in this way will not be displayed.

@mouseover="changeList"

So use it this way

@mouseover.native="changeList()"

Move the mouse in, or click other add or delete methods to trigger
The Input echo component is hidden. You can click Modify, add and other methods to display the Cascader. This is a perfect solution.