iview使用问题汇总

张三疯不疯

已于 2023-10-19 11:05:03 修改

阅读量415

点赞数

分类专栏： vue 文章标签： iview

于 2023-04-12 10:33:27 首次发布

本文链接：https://blog.csdn.net/myron_007/article/details/130099023

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

iview

iview使用问题汇总

iview使用问题汇总

常用基础页面示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iView 3 Drawer Example</title>

    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 axios-->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>

    <!-- 引入 iView 样式和脚本 -->
    <link rel="stylesheet" href="https://unpkg.com/iview@3.5.4/dist/styles/iview.css">
    <script src="https://unpkg.com/iview@3.5.4/dist/iview.min.js"></script>

</head>
<body>
    <div id="app">
    </div>
<script>
    new Vue({
        el: '#app',
        data: {

        },
        methods: {

        },
    });
</script>
</body>
</html>

1. iview表格不换行省略处理

开启省略号

ellipsis: true
参考:https://iview.github.io/components/table
效果:
在这里插入图片描述

鼠标经过显示完整内容

			{title:'模板', key:'template', ellipsis: true,
                      render: (h, params) => {
                          return h('div', [
                              h('span', {
                                  style: {
                                      display: 'inline-block',
                                      width: '100%',
                                      overflow: 'hidden',
                                      textOverflow: 'ellipsis',
                                      whiteSpace: 'nowrap'
                                  },
                                  domProps: {
                                      title: params.row.template
                                  }
                              }, params.row.template)
                          ]);
                      }
                  },

2. 提取当前相对路径

2.1 背景

为了方便开发springboot的项目的一些后台管理页面, 会使用vue + iview作为script资源直接在静态页面中引入,同时使用axios作为ajax请求服务端。正常使用相对路径作为接口的相对路径即可, 但是现在的springboot经常作为微服务部署. 访问服务之前往往还有一个网关。

本地模式下: http://192.168.10.100/manage.html => 页面接口地址:http://192.168.10.100/manage/list => 请求成功
网关模式下: http://gateway-service/xxx-service/manager.html => 页面接口地址 http://gateway-service/manage/list => 丢失路由前缀xxx-service, 提示404报错。

2.2 解决方案

:需要使用动态的相对地址.能够获取页面地址的相对路径,这样才能保证ajax请求的相对地址。在任意网关模式下,都可以正常地携带路由前缀。

假设我们springboot地static页面地址为manage.html 提取相对地址如下

<script>

    //全局变量
    Vue.prototype.baseUrl = "/";

    var dynamicUrl = {
        "getBaseUrl": function() {
            var baseUrl;
            if (baseUrl === undefined) {
                var urlMatches = /(.*)\/manage.html.*/.exec(window.location.href);
                baseUrl = urlMatches[1];
            }
            return baseUrl;
        }
    };
    console.log(dynamicUrl.getBaseUrl())
    Vue.prototype.baseUrl = dynamicUrl.getBaseUrl()

    //封装axios
    const instance = axios.create({
        baseURL: Vue.prototype.baseUrl,
        timeout: 1000000,
        withCredentials: true//跨域
    });
    // 添加响应拦截器
    instance.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 对响应错误做点什么
        if(error.status == 400) {
            fileVM.$Modal.warning({
                title: '错误',
                content: error.data.message
            });
        }
    });
    Vue.prototype.axios = instance;
    fileVM = new Vue({
        el: '#app',
        data: {
            bucketName: 'aaaa'
        },
        created: function () {

        },
        computed: {

        },
        methods: {
            handleCreateDirectory() {
                var vm = this;
                const config = {
                    headers: {
                        'application-name': this.bucketName
                    }
                };
                // 创建包含表单数据的对象
                const formData = new FormData();
                formData.append('bucketName', this.bucketName);
                formData.append('directoryName', this.directory.directoryName);

                axios.post('/admin/storage/file/directory', formData, config)
                    .then(response => {
                        console.log('File uploaded successfully', response);
                        vm.handleSearch(vm.getCurrentPath());
                    })
                    .catch(error => {
                        console.error('Error uploading file', error);
                    });
            }
       }     
    });

最终效果

网关模式下: http://gateway-service/xxx-service/manager.html => 页面接口地址 http://gateway-service/xxx-service/manage/list => 访问成功

3.列表数据单位换算

要在HTML页面中使用iView 2.6来渲染表格数据并实现单位换算，你可以使用iView提供的表格组件和自定义过滤器来完成。以下是一个示例，演示如何使用iView来实现这个功能

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@2.6.6/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/iview@2.6.6/dist/iview.js"></script>

<div id="app">
  <Table :columns="columns" :data="tableData"></Table>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    tableData: [
      { fileName: 'File 1', sizeInBytes: 1024 }, // 1 KB
      { fileName: 'File 2', sizeInBytes: 1048576 }, // 1 MB
      { fileName: 'File 3', sizeInBytes: 1073741824 }, // 1 GB
    ],
    columns: [
      {
        title: '文件名',
        key: 'fileName',
      },
      {
        title: '文件大小',
        key: 'sizeInBytes',
        render: (h, params) => {
          const bytes = params.row.sizeInBytes;
          const fileSize = formatFileSize(bytes);
          return h('span', fileSize);
        },
      },
    ],
  },
  methods: {
    formatFileSize(bytes) {
      if (bytes >= 1073741824) {
        return (bytes / 1073741824).toFixed(2) + ' GB';
      } else if (bytes >= 1048576) {
        return (bytes / 1048576).toFixed(2) + ' MB';
      } else if (bytes >= 1024) {
        return (bytes / 1024).toFixed(2) + ' KB';
      } else {
        return bytes + ' B';
      }
    },
  },
});
</script>

4.列表行号

            {
                    title: '序号',
                    width:80,
                    render:(h,params)=>{
                        return h("span" ,{
                        },params.index+1)
                    }
                },

5.列表超链接

将 articleId 字段显示为超链接，并且在点击时在新窗口中打开链接，在 columns 中的 render 函数中进行自定义渲染

<template>
  <div id="app">
    <i-table :columns="columns" :data="sortedTableData" border></i-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '行号',
          key: 'rowNumber',
          width: 100 // 设置列宽度
        },
        {
          title: '文章ID',
          key: 'articleId',
          render: (h, params) => {
            return h('a', {
              attrs: {
                href: params.row.articleUrl, // 假设后端返回了 articleUrl 字段作为文章链接
                target: '_blank' // 在新窗口中打开链接
              }
            }, params.row.articleId);
          }
        },
        // ...（其他列定义）...
      ],
      tableData: []  // 初始化为空，后续会通过 Axios 请求填充数据
    };
  },
  computed: {
    sortedTableData() {
      // 对数据进行排序，这里假设按照 articleId 进行升序排序
      const sortedData = this.tableData.slice().sort((a, b) => a.articleId - b.articleId);

      // 重新为每一条数据添加 rowNumber 字段
      return sortedData.map((item, index) => {
        return {
          ...item,
          rowNumber: index + 1,
          articleUrl: 'https://example.com/article/' + item.articleId // 替换为实际的文章链接格式
        };
      });
    }
  },
  created() {
    // 在组件创建时发送 Axios 请求获取后端数据
    axios.get('/your-backend-api-endpoint')  // 替换为实际的后端接口URL
      .then(response => {
        // 请求成功时将数据绑定到表格
        this.tableData = response.data;
      })
      .catch(error => {
        // 请求失败时处理错误
        console.error('Error fetching data:', error);
      });
  }
};
</script>