avue的crud使用心得：自定义插槽修改列内容、自定义表单的rules效验、弹出框中的元素和表格列中显示元素不同、对表格进行排序

目录

 1、自定义插槽修改列内容

2、自定义表单的rules效验

3、弹出框中的元素和表格列中显示元素不同

 4、对表格进行排序

---

 1、自定义插槽修改列内容

效果图、代码如下

//设置slot: true   template的slot属性名与prop的属性值一致
//省略了大量标签内属性 
    
 

2、自定义表单的rules效验

3、弹出框中的元素和表格列中显示元素不同

以图片type:upload为例

 新增时弹出框中元素并没有显示为图片框

//插槽中的slot比配置中的prop多加Form  设置slot: true

          

修改后，效果如下

 4、对表格进行排序

sortSore() {
      let data2 = this.deepClone(this.data);//对数据进行深拷贝，这样之后对data2的操作不会影响this.data,网上很多深拷贝方法，摘抄一个过来就行
      let scoreSortList = [];
      data2.forEach((ele, index) => {
        scoreSortList.push({ [index.toString()]: ele.score });//score为你想要进行排序的字段
      });
      scoreSortList.sort((a, b) => {
        return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
      });
      scoreSortList.forEach((elem, inde) => {
        this.data[Object.keys(elem)[0]].sorting = inde + 1;//sorting 为要把排好序后的序号放在哪一列。前提是this.data中有这一列的prop
      });
    },

 写了demo如下：

对[{score:"23.56",sorting:1},{score:"59.11",sorting:2},{score:"26",sorting:3},{score:"25.89",sorting:4}]的score进行排序