首页 > 其他分享 >element table 表格控件实现单选功能

element table 表格控件实现单选功能

时间:2023-09-05 16:22:07浏览次数:56  
标签:控件 title 小龙女 dealingPeople element priority state 单选 id

 

 

<el-table
    :data="tableData"
    border
    stripe
    ref="tableData"
    @row-click="singleElection">
    <el-table-column label="" width="65">
        <template slot-scope="scope">
            <el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>
        </template>
    </el-table-column>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="title" label="标题"></el-table-column>
    <el-table-column prop="priority" label="优先级"></el-table-column>
    <el-table-column prop="state" label="状态"></el-table-column>
    <el-table-column prop="dealingPeople" label="处理人"></el-table-column>
</el-table>

 

data() {
    return {
        templateSelection: '',
        // 返回数据
        tableData: [
            {
                'id': 1,
                'title': '嘿嘿嘿',
                'priority': '高',
                'state': 1,
                'dealingPeople': '小龙女'
                },
            {
                'id': 2,
                'title': '嘻嘻嘻',
                'priority': '中',
                'state': 2,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            }
        ]
    }
}

 

 

 参考:https://www.jb51.net/article/256492.htm

标签:控件,title,小龙女,dealingPeople,element,priority,state,单选,id
From: https://www.cnblogs.com/zqlym/p/17679982.html

相关文章

  • 界面控件DevExtreme(v23.2)下半年发展路线图
    在这篇文章中,我们将介绍DevExtreme在v23.2中发布的一些主要特性,这些特性既适用于DevExtremeJavaScript(Angular、React、Vue、jQuery),也适用于基于DevExtreme的ASP.NETMVC/Core控件。DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。......
  • 【愚公系列】2023年09月 WPF控件专题 DatePicker控件详解
    (文章目录)前言WPF控件是WindowsPresentationFoundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。WPF控件可以分为两类:原生控件和自定义控件。原生控件是由Microsoft提供的内置控件,如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见......
  • 今天练习element组件的时候,引入element样式和脚本文件以及vue的组件之后,导入简单eleme
    2023-09-04今天练习element组件的时候,引入element样式和脚本文件以及vue的组件之后,导入简单element组件练习之后,查看组件的时候,样式一直出不来,经过我多次排查,终于发现,导入的三个内容是有顺序排序要求的。必须先导入vue,然后再导入其他的两个。<!DOCTYPEhtml><htmllang="en">......
  • Vue 3 之 Element Plus 之 Pagination 的 坑
    版本信息:vue.js3.3.4ElementPlus2.3.12浏览器ChromeVersion116-- 坑描述试验ElementPlus之分页时,出现了异常——之前开发的弹窗打不开了。 Pagination分页:https://element-plus.org/zh-CN/component/pagination.html 在页面加里了一些弹窗(对话框):<el-......
  • C#Winform怎么让控件随着主界面大小变化
    usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingSystem.Windows.Forms;namespaceWindowsFormsApplication1{publicpar......
  • 百度上传下载控件教程
    ​ 一、功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac支持文件和文件夹的批量下载,断点续传。刷新页面后继续传输。关闭浏览器后保留进度信息。支持文件夹批量上传下载,服务器端保留文件夹层级结构,服务器端......
  • 百度上传下载控件源码
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。首先我们需要了解的是上传文件三要素:1.表单提交方式:post(get方式提交有大小限制,post没有)2.表单的enctype属性:必须设置为multipart/form-data.3.表单必须......
  • 百度上传下载控件代码
    ​ 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify......
  • Vue element 表格跨行合并单元格
    1、定义table.js/***生成表格合并行坐标阵列rowspan、colspan信息*@param{表格数据}tableData*@param{合并列字段}mergeColumnsexample:["filed1",[filed2]]*@returns坐标阵列*/exportfunctiongetTableSpanMap(tableData,mergeColumns){varspa......
  • 20230529 java.lang.reflect.AnnotatedElement
    介绍java.lang.reflect.AnnotatedElementpublicinterfaceAnnotatedElementAPIisAnnotationPresentgetAnnotationgetAnnotationsgetAnnotationsByTypegetDeclaredAnnotationgetDeclaredAnnotationsByTypegetDeclaredAnnotations......