iView Table组件自定义

 效果展示

代码如下

resourcesColumn: [
        {
          title: "文件名",
          key: "FileName",
          align: "left",
          width: 200,
          render: (h, params) => {
            var me = params.row;
            var showName = (me.FileName.length>17) ? me.FileName.substr(0,10) + "···" : me.FileName;
            var imgUrl;
            var fileType = me.FileName.split(".");
            fileType = fileType[fileType.length - 1].toLowerCase();
            switch (fileType) {
              case "pdf":
              case "pptx":
                imgUrl = "ppt_icn.png";
                break;
              case "docx":
                imgUrl = "word_icn.png";
                break;
              case "xlsx":
                imgUrl = "xlsx_icn.png";
                break;
              case "png":
              case "jpg":
              case "jpeg":
              case "gif":
                imgUrl = "img_icn.png";
                break;
              case "mp4":
              case "mpeg":
              case "mpg":
              case "avi":
              case "mov":
              case "wmv":
              case "mkv":
              case "flv":
                imgUrl = "video_icn.png";
                break;
              case "mp3":
              case "wave":
              case "wma":
                imgUrl = "voice_icn.png";
                break;
              default:
                break;
            }
            return h("div", [
              h(
                "img",
                {
                  props: {
                    to: me.Url
                  },
                  attrs: {
                    src: "/static/images/" + imgUrl
                  },
                  style: {
                    width: "14px",
                    height: "16px",
                    marginRight: "6px"
                  },
                  on: {
                    click: () => {}
                  }
                },
                ""
              ),
                h(
                  "span",
                  {
                    class: [],
                    style: {
                      marginRight: "10px",
                      display: me.disSpan
                    },
                    attrs: {
                      title: me.FileName
                    },
                    on: {
                      click: () => {}
                    }
                  },
                  showName
                ),
                h(
                  "Input",
                  {
                    class: ["editInput"],
                    props: {
                      //将单元格的值给Input
                      value: me.newName.substr(0,me.newName.lastIndexOf('.'))
                    },
                    style: {
                      display: me.disInput
                    },
                    on: {
                      "on-change": event => {
                        //值改变时
                        //将渲染后的值重新赋值给单元格值
                        me.newName = event.target.value;
                      }
                    }
                  }
                ),
                h(
                  "div",
                  {
                    class: ["edit"],
                    attrs: {
                      title: "重命名"
                    },
                    style: {
                      display: me.disSpan
                    },
                    on: {
                      click: () => {
                        me.disSpan = "none";
                        me.disInput = "inline-block";
                      }
                    }
                  },
                  ""
                ),
                h(
                  "div",
                  {
                    class: ["confirmed"],
                    attrs: {
                      title: "完成"
                    },
                    style: {
                      display: me.disInput
                    },
                    on: {
                      click: () => {
                        me.disSpan = "inline-block";
                        me.disInput = "none";
                        var params = {
                          Id: me.Id, // 文件id !!required!!
                          AlterName: me.newName // 文件原名称 !!required!!
                        };
                        if (me.newName != me.FileName) {
                          this.AlterFileName(params);
                          me.FileName = me.newName + "." + fileType;
                        }
                      }
                    }
                  },
                  ""
                )
            ]);
          }
        },
        {
          title: "来源",
          key: "SourseName",
          align: "left"
        },
        {
          title: "添加日期",
          key: "CreateTime",
          align: "left"
        },
        {
          title: "操作",
          key: "action",
          width: 250,
          render: (h, params) => {
            var me = params.row;
            var type;
            var fileType = me.FileName.split(".");
            fileType = fileType[fileType.length - 1].toLowerCase();
            switch (fileType) {
              case "pdf":
              case "pptx":
              case "docx":
              case "xlsx":
                type = "File";
                break;
              case "png":
              case "jpg":
              case "jpeg":
              case "gif":
                type = "Img";
                break;
              case "mp4":
              case "mpeg":
              case "mpg":
              case "avi":
              case "mov":
              case "wmv":
              case "mkv":
              case "flv":
                type = "Video";
                break;
              case "mp3":
              case "wave":
              case "wma":
                type = "Voice";
                break;
              default:
                break;
            }
            return h("div", [
              h(
                "div",
                {
                  class: ["examine"],
                  attrs: {
                    title: "查看"
                  },
                  on: {
                    click: () => {
                      this.PreviewFile(me.Id, me.FileName, type);
                    }
                  }
                },
                ""
              ),
              h(
                "div",
                {
                  class: ["cut-off-rule"]
                },
                ""
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    placement: "bottom-end",
                    title: "确认删除此文件吗？",
                    size: "small",
                    width: "160"
                  },
                  on: {
                    "on-ok": () => {
                      this.RemoveFile(params.index, me.Id);
                    },
                    "on-cancel": () => {}
                  }
                },
                [
                  h(
                    "div",
                    {
                      class: ["delete"],
                      attrs: {
                        title: "删除"
                      },
                      on: {
                        click: () => {}
                      }
                    },
                    ""
                  )
                ]
              )
            ]);
          }
        }
      ]