vuejs+element UI table的常见的属性及事件

清疚 2021-09-15 07:28 561阅读 0赞

一.table组件的方法，事件

查看官网

二.常用的事件，属性

(一).属性

1.多选框（type = “selection”） 需要实现勾选的功能

在 内加入

2. :data=”tableData” 是table的数据绑定

  1. <el-table :data="tableData">
  3. export default {   
  4.     data() {
  5.         return{
  6.             tableData: [],
  7.         }
  8.     }
  9. }

3.formatter 用来格式化内容

对table的值进行处理。Function(row, column, cellValue, index){}

A.使用formatter需要注意以下几点：
①无论formatter出何种形式，格式化出的DOM一定都是被包含在默认的div标签内
②在写formatter函数时要保证有值返回，否则单元格没有内容可展示，所以if的时候别忘了else

③formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的。

B。查看小demo

  1. <template>
  2.     <el-table :data="tableData3"  ref="multipleTable">
  3.         <el-table-column type="selection" width="55" ></el-table-column>
  4.         <el-table-column type="index" label="序号" width="60"></el-table-column>
  5.         <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
  6.         <el-table-column prop="date" label="日期"></el-table-column>
  7.         <el-table-column prop="name" label="姓名"></el-table-column>
  8.          <el-table-column prop="IsAudit"  :formatter="formatterColumn" label="审核状态" ></el-table-column>
  9.         <el-table-column prop="address" label="地址"></el-table-column>
  10.     </el-table>
  11. </template>
  12. <script>
  13. export default {   
  14.     data() {
  15.         return {
  16.             tableData3: [{
  17.                 id:'1',
  18.                 date: '2016-05-03',
  19.                 name: '王小虎',
  20.                 address: '上海市普陀区金沙江路 1518 弄',
  21.                 IsAudit:0,
  22.                 sex:'1'
  23.             }, {
  24.                 id:'2',
  25.                 date: '2016-05-02',
  26.                 name: '王小虎',
  27.                 address: '上海市普陀区金沙江路 1518 弄',
  28.                 IsAudit:1,
  29.                 sex:'0'
  30.             }, {
  31.                 id:'3',
  32.                 date: '2016-05-02',
  33.                 name: '王小虎',
  34.                 address: '上海市普陀区金沙江路 1518 弄',
  35.                 IsAudit:10,
  36.                 sex:'-1'
  37.             }]
  38.         }
  39.     },
  40.     mounted() {
  41.     },
  42.     methods: {
  43.         formatSex: function (row, column, cellValue, index) {
  44.             return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  45.         },
  46.         //状态改成汉字
  47.         formatterColumn(row, column) {
  48.             switch(row.IsAudit){
  49.                 case 0:
  50.                     return '未通过';
  51.                     break;
  52.                 case 1:
  53.                     return '审核通过';
  54.                     break;
  55.                 case 10:
  56.                     return '待审核';
  57.                     break;
  58.                 case 9:
  59.                     return '草稿';
  60.                     break;
  61.                 default:
  62.                     return '未知';
  63.             }
  64.         }
  65.     }
  66. }
  67. </script>

20180423161555865

4.给table 的字段 设置相应的颜色

  1. <el-table-column label="第三方扎帐" >
  2.               <template slot-scope="{row}">
  3.                   <span style="color:red;" v-if="row.status ==2"  @click="handleModifyStatus(row)">短款-700.00/3笔</span>
  4.                   <span style="color: #1890ff;" v-else-if="row.status == 3"  @click="handleModifyStatus(row)"> 长款+100.00/1笔</span>
  5.                   <span v-else>一致</span>
  6.               </template>
  7.             </el-table-column>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70

5.selectable (row, index) 是否可以选中

注意：仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

使用：

  1. <template>
  2.     <el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange">
  3.         <el-table-column type="selection" width="55"  :selectable="selectable"></el-table-column>
  4.     </el-table>
  5. </template>
  6. <script>
  7. export default {   
  8.     methods: {
  9.         selectable(row, index){
  10.             if(index === 1){
  11.                 return true;
  12.             }else{
  13.                 return false;
  14.             }
  15.         }
  16.     }
  17. }
  18. </script>

只有第二条是可以选中 其他不能

2018042316524860

6.element table 禁止拖动

只需要添加个el-table-column 上添加 :resizable=”false”

(二).方法

1.row-click 点击行事件

handleRowChange(row, event, column){ row此行的数据 }

2.selection-change 获取选中的所有值

selectionRowsChange(val){ val 选中的值}

三.实例

1.Element-ui 中table 默认选中 toggleRowSelection

2.简单的增删改

20180423162005140

1.table tr 点击 复选框选中 再次点击 复选框取消选中

①设置一个全局函数

  1. exports.install = function (Vue, options) {  
  2.     //删除数组 指定的元素  
  3.     Vue.prototype.removeByValue=function(arr, val){  
  4.         for(var i=0; i<arr.length; i++) {  
  5.             if(arr[i] == val) {  
  6.                 arr.splice(i, 1);  
  7.                 break;  
  8.             }  
  9.         }  
  10.     };  
  11. };

②tableUser.vue

  1. <!--用户名 增删改 基本操作-->
  2. <template>
  3.     <section>
  4.         <!--工具条-->
  5.         <el-col :span="24" class="el-table_headtoolbar" style="padding-bottom: 0px;">
  6.             <el-form :inline="true" :model="filters" class="userform" label-width="50px">
  7.                 <el-form-item label="姓名"  prop="name">
  8.                     <el-input v-model="filters.name" placeholder="姓名"  prefix-icon="el-icon-search"></el-input>
  9.                 </el-form-item>
  10.                 <el-form-item label="性别" prop="sex">
  11.                     <el-select v-model="filters.sex" filterable placeholder="请选择" prop="sex">
  12.                         <el-option v-for="item in sexOptions" :key="item.value"  :label="item.label" :value="item.value">
  13.                         </el-option>
  14.                     </el-select>
  15.                 </el-form-item>
  16.                 <el-dropdown split-button type="primary" @click="btnSearch" trigger="click">
  17.                       检索
  18.                     <el-dropdown-menu slot="dropdown" class="lyzbtn-group" trigger="click">
  19.                         <el-dropdown-item @click.native="btnReset">重置</el-dropdown-item>
  20.                     </el-dropdown-menu>
  21.                 </el-dropdown>
  22.                 <el-dropdown split-button type="primary" @click="btnNew" trigger="click">
  23.                       新增
  24.                     <el-dropdown-menu slot="dropdown" trigger="click">
  25.                         <el-dropdown-item  @click.native="btnEdit">编辑</el-dropdown-item>
  26.                         <el-dropdown-item  @click.native="btnDelete">删除</el-dropdown-item>
  27.                     </el-dropdown-menu>
  28.                 </el-dropdown>
  29.             </el-form>
  30.         </el-col>
  31.         <!--列表-->
  32.         <el-table :data="users.slice((page-1)*pagesize,page*pagesize)"  highlight-current-row v-loading="listLoading"  style="width: 100%;"  @selection-change="selsUserChange" class="userTableJs" @row-click="handleRowChange"  ref="table">
  33.             <el-table-column type="selection" width="55">
  34.             </el-table-column>
  35.             <el-table-column type="index" label="序号" width="60">
  36.             </el-table-column>
  37.             <el-table-column prop="name" label="姓名" width="120">
  38.             </el-table-column>
  39.             <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex">
  40.             </el-table-column>
  41.             <el-table-column prop="age" label="年龄" width="100" >
  42.             </el-table-column>
  43.             <el-table-column prop="birth" label="生日" width="120">
  44.             </el-table-column>
  45.             <el-table-column prop="addr" label="地址" min-width="180">
  46.             </el-table-column>
  47.         </el-table>
  48.         <!--工具条-->
  49.         <el-col :span="24" class="el-table_footertoolbar">
  50.             <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" :total="users.length" style="float:right;">
  51.             </el-pagination>
  52.         </el-col>
  53.         <!--新增界面-->
  54.         <el-dialog title="新增" :visible.sync="addFormVisible">
  55.             <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
  56.                 <el-form-item label="姓名" prop="name">
  57.                     <el-input v-model="addForm.name" auto-complete="off"></el-input>
  58.                 </el-form-item>
  59.                 <el-form-item label="性别">
  60.                     <el-radio-group v-model="addForm.sex">
  61.                         <el-radio class="radio" :label="1">男</el-radio>
  62.                         <el-radio class="radio" :label="0">女</el-radio>
  63.                     </el-radio-group>
  64.                 </el-form-item>
  65.                 <el-form-item label="年龄">
  66.                     <el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
  67.                 </el-form-item>
  68.                 <el-form-item label="生日">
  69.                     <el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
  70.                 </el-form-item>
  71.                 <el-form-item label="地址">
  72.                     <el-input type="textarea" v-model="addForm.addr"></el-input>
  73.                 </el-form-item>
  74.             </el-form>
  75.             <div slot="footer" class="dialog-footer">
  76.                 <el-button @click.native="addFormVisible = false">取消</el-button>
  77.                 <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
  78.             </div>
  79.         </el-dialog>
  80.         <!--编辑界面-->
  81.         <el-dialog title="编辑" :visible.sync="editFormVisible">
  82.             <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  83.                 <el-form-item label="姓名" prop="name">
  84.                     <el-input v-model="editForm.name" auto-complete="off"></el-input>
  85.                 </el-form-item>
  86.                 <el-form-item label="性别">
  87.                     <el-radio-group v-model="editForm.sex">
  88.                         <el-radio class="radio" :label="1">男</el-radio>
  89.                         <el-radio class="radio" :label="0">女</el-radio>
  90.                     </el-radio-group>
  91.                 </el-form-item>
  92.                 <el-form-item label="年龄">
  93.                     <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
  94.                 </el-form-item>
  95.                 <el-form-item label="生日">
  96.                     <el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
  97.                 </el-form-item>
  98.                 <el-form-item label="地址">
  99.                     <el-input type="textarea" v-model="editForm.addr"></el-input>
  100.                 </el-form-item>
  101.             </el-form>
  102.             <div slot="footer" class="dialog-footer">
  103.                 <el-button @click.native="editFormVisible = false">取消</el-button>
  104.                 <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
  105.             </div>
  106.         </el-dialog>
  107.     </section>
  108. </template>
  109. <script>
  110. import util from '@/utils/index'//日期的操作
  111. import { getUserListPage,batchRemoveUser,addUser,editUser} from '@/assets/api/api';//接口
  112. export default {
  113.     data() {
  114.         return {
  115.             filters: {
  116.                 name: ''
  117.             },
  118.             //性别
  119.             sexOptions:[
  120.                 {value: '1',label: '男'}, 
  121.                 {value: '0',label: '女'}
  122.             ],
  123.             users: [],//表格数据 
  124.             page: 1,//当前页数
  125.             pagesize:10,//一页显示几条
  126.             listLoading: false,
  127.             sels: [],//列表选中列
  128.             total: 0,
  129.             editFormVisible: false,//编辑界面是否显示
  130.             editLoading: false,
  131.             editFormRules: {
  132.                 name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  133.                 birth: [{ type: 'date', required: true, message: '日期必须填写', trigger: 'change' }]
  134.             },
  135.             //编辑界面数据
  136.             editForm: {
  137.                 id:undefined,
  138.                 name: '',
  139.                 sex:-1,
  140.                 age: 0,
  141.                 birth:new Date(),
  142.                 addr: ''
  143.             },
  145.             addFormVisible: false,//新增界面是否显示
  146.             addLoading: false,
  147.             addFormRules: {
  148.                 name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
  149.                 birth: [{ type: 'date', required: true, message: '日期必须填写', trigger: 'change' }]
  150.             },
  151.             //新增界面数据
  152.             addForm: {
  153.                 name: '',
  154.                 sex: -1,
  155.                 age: 0,
  156.                 birth: new Date(),
  157.                 addr: ''
  158.             },
  159.             arrID:[],
  161.         }
  162.     },
  163.     methods: {
  164.         //性别显示转换
  165.         formatSex: function (row, column) {
  166.             return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  167.         },
  168.         //初始页page、初始每页数据数pagesize和数据data
  169.         handleSizeChange(size){
  170.             this.pagesize = size;
  171.         },
  172.         handleCurrentChange(val) {
  173.             this.page = val;
  174.             this.getUsers();
  175.         },
  176.         handleRowChange(row, event, column){
  177.             var same=false;
  178.             if(this.arrID.length > 0){
  179.                 for(var i=0; i<this.arrID.length ;i++){
  180.                     if(this.arrID[i]==row.id){
  181.                         same=true;
  182.                         this.removeByValue(this.arrID, row.id);
  183.                         break;
  184.                     }
  185.                 }
  186.                 if(same==true){
  187.                     this.$refs.table.toggleRowSelection(row,false);
  188.                 }else{
  189.                     this.$refs.table.toggleRowSelection(row,true);
  190.                     this.arrID.push(row.id);
  191.                 }
  192.             }else{
  193.                 this.$refs.table.toggleRowSelection(row,true);
  194.                 this.arrID.push(row.id);
  195.             }
  196.         },
  197.         //获取用户列表
  198.         getUsers() {
  199.             let para = {
  200.                 page: this.page,
  201.                 name: this.filters.name,
  202.                 sex: this.filters.sex
  204.             };
  205.             this.listLoading = true;
  206.             getUserListPage(para).then((res) => {
  207.                 this.users = res.data.users;
  208.                 this.total = res.data.total;
  209.                 this.listLoading = false;
  211.             });
  212.         },
  213.         //检索
  214.         btnSearch(){
  215.             console.log('检索')
  216.             var searchParams = { name: this.filters.name, sex: this.filters.sex };
  217.                 //searchUser(searchParams).then(data => {
  219.                 //});
  220.         },
  221.         //重置
  222.         btnReset(){
  223.             this.resetForm(".userform");
  224.         },
  225.         //新增
  226.         btnNew(){
  227.             this.addFormVisible = true;
  228.         },
  229.         //编辑
  230.         btnEdit(){
  231.             var ids = this.sels.map(item => item.id);
  232.             if(ids =='' || ids.length >1){
  233.                 this.$alert('请选择一条要编辑的记录', '提示', {
  234.                     dangerouslyUseHTMLString: true
  235.                 });
  236.             }else{
  237.                 const obj={};
  238.                 obj.id=this.sels.map(item => item.id).toString();
  239.                 obj.name=this.sels.map(item => item.name).toString();
  240.                 console.log(this.sels.map(item => item.sex).toString())
  241.                 if(this.sels.map(item => item.sex).toString() == 1){
  242.                     obj.sex=1;
  243.                 }else if(this.sels.map(item => item.sex).toString() == 0){
  244.                     obj.sex=0;
  245.                 }else{
  246.                     obj.sex=-1;
  247.                 }
  248.                 obj.age=this.sels.map(item => item.age).toString();
  249.                 obj.birth=this.sels.map(item => item.birth).toString();
  250.                 obj.addr=this.sels.map(item => item.addr).toString();
  251.                 this.editFormVisible = true;
  252.                 this.editForm = Object.assign({},obj);
  253.             }
  255.         },
  256.         //删除
  257.         btnDelete(){
  258.             var ids = this.sels.map(item => item.id).toString();
  259.             if(ids ==''){
  260.                 this.$alert('请选择要删除的记录', '提示', {
  261.                     dangerouslyUseHTMLString: true
  262.                 });
  263.             }else{
  264.                 this.$confirm('确认删除选中记录吗？', '提示', {
  265.                     type: 'warning'
  266.                 }).then(() => {
  267.                     this.listLoading = true;
  268.                     //NProgress.start();
  269.                     let para = { ids: ids };
  270.                     batchRemoveUser(para).then((res) => {
  271.                         this.listLoading = false;
  272.                         //NProgress.done();
  273.                         this.$message({
  274.                             message: '删除成功',
  275.                             type: 'success'
  276.                         });
  277.                         this.getUsers();
  278.                     });
  279.                 }).catch(() => {
  281.                 });
  282.             }
  283.         },
  284.         //编辑
  285.         editSubmit: function () {
  286.             this.$refs.editForm.validate((valid) => {
  287.                 if (valid) {
  288.                     this.$confirm('确认提交吗？', '提示', {}).then(() => {
  289.                         this.editLoading = true;
  290.                         //NProgress.start();
  291.                         let para = Object.assign({}, this.editForm);
  292.                         para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  293.                         editUser(para).then((res) => {
  294.                             this.editLoading = false;
  295.                             //NProgress.done();
  296.                             this.$message({
  297.                                 message: '提交成功',
  298.                                 type: 'success'
  299.                             });
  300.                             this.$refs['editForm'].resetFields();
  301.                             this.editFormVisible = false;
  302.                             this.getUsers();
  303.                         });
  304.                     });
  305.                 }
  306.             });
  307.         },
  308.         //新增
  309.         addSubmit: function () {
  310.             this.$refs.addForm.validate((valid) => {
  311.                 if (valid) {
  312.                     this.$confirm('确认提交吗？', '提示', {}).then(() => {
  313.                         this.addLoading = true;
  314.                         //NProgress.start();
  315.                         let para = Object.assign({}, this.addForm);
  316.                         para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
  317.                         addUser(para).then((res) => {
  318.                             this.addLoading = false;
  319.                             //NProgress.done();
  320.                             this.$message({
  321.                                 message: '提交成功',
  322.                                 type: 'success'
  323.                             });
  324.                             this.$refs['addForm'].resetFields();
  325.                             this.addFormVisible = false;
  326.                             this.getUsers();
  327.                         });
  328.                     });
  329.                 }
  330.             });
  331.         },
  332.         selsUserChange(sels) {
  333.             this.sels = sels;
  334.             if(sels.length>0){
  335.                 var valId=[];
  336.                 for(var i=0;i<sels.length;i++){
  337.                     var arrIDsame=false;
  338.                     valId.push(sels[i].id);
  339.                 }
  340.                 this.arrID=valId;
  341.             }
  342.         }
  343.     },
  344.     mounted() {
  345.         this.getUsers();
  347.     }
  348. }
  349. </script>

3.table行内编辑

vue slot的scope传递，要表述的意思组件中slot这个插槽上可以赋值各种属性，在调用组件的页面中可以使用

发表评论

表情：
评论列表 （有 0 条评论，561人围观）

还没有评论，来说两句吧...

相关阅读