iview+vue实现表格列蓝色可点击功能

1、实现效果 (可点击调用方法)

在这里插入图片描述

2、实现代码

{ title: '方案名称',  key: 'famc',minWidth:230,	 fixed: 'left',
    		render: function(h,params){
    			return h('div', [
						h('a', {
                			props: {
                				type: 'primary',
                				size: 'small'
                			},
                			style: {
                				marginRight: ''
                			},
                			on: {
                				click: function(){
                					app.toxq(params.row)
                				}
                			}
						}, params.row.famc)
    			])
    		},sortable: 'custom'
    	},
Vue.js中使用iView框架和vue-excel-import插件可以方便地实现前端读取Excel文件的功能,并将其数据渲染到页面上。以下是简单的步骤: 1. **安装依赖**: - 首先需要安装`vue-excel-import`库,它是一个轻量级的Excel导入组件。你可以通过npm或yarn进行安装: ``` npm install vue-excel-import iview axios # 或者 yarn add vue-excel-import iview axios ``` 2. **引入所需模块**: 在`main.js`或单文件组件的顶部,引入所需的组件和样式: ```javascript import { ElButton } from 'iview'; import ExcelReader from 'vue-excel-import'; import 'iview/dist/styles/iview.css'; import 'vue-excel-import/dist/vue-excel-import.css'; ``` 3. **配置Vue应用**: 在Vue实例的`mounted`生命周期钩子里,初始化Excel Reader组件并指定上传文件的方法: ```html <template> <div> <el-button @click="handleFileUpload">选择Excel文件</el-button> <ExcelReader ref="excelReader" :on-success="handleSuccess" :on-error="handleError"></ExcelReader> </div> </template> <script> export default { components: { ExcelReader, }, methods: { handleFileUpload() { this.$refs.excelReader.open(); }, // 接收解析后的数据 handleSubmit(file) { this.$refs.excelReader.submit(file); }, // 成功回调处理数据 handleSuccess(data) { const parsedData = data.records; // 解析的数据数组 this.renderToTable(parsedData); // 将数据渲染到表格或其他UI元素 }, // 错误回调处理错误信息 handleError(error) { console.error('Error:', error); }, renderToTable(data) { // 根据数据结构创建表格或使用iview的table组件 // 示例: this.tableData = data.map(row => ({ ...row, })); }, }, }; </script> ``` 4. **渲染数据**: `handleSuccess`函数接收的是一个包含所有行的对象数组,你需要将这个数组转换为你希望展示的格式,然后在`renderToTable`方法中,将数据赋值给Vue组件的data属性,比如`<el-table>`。 5. **显示结果**: 现在你应该能看到一个表单按钮,点击后可以选择Excel文件。文件成功导入后,数据会被渲染到已设定好的`<el-table>`或者其他UI元素中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无极的移动代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值