el-table の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+el-table へ行く。
• +Vue+el-table の差分を削除

#author("2022-09-29T12:57:22+08:00","default:Admin","Admin")
#author("2022-10-25T16:51:57+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* 概要 [#ye5ca614]

prop 属性对应对象中的键名，用来填充数据；label 属性定义表格的列名；width 属性定义表格的列宽。

#codeprettify{{
<template>
  <el-table :data="tableData" class="data_table">
    <el-table-column prop="number" label="编号" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="info" label="描述">
    </el-table-column>
  </el-table>
</template>
}}

#codeprettify{{
    data () {
      return {
        tableData: [{
          number: '2016001',
          name: '小明',
          info: '这是第一条数据'
        }, {
          number: '2016002',
          name: '小明',
          info: '这是第二条数据'
        }, {
          number: '2016003',
          name: '小明',
          info: '这是第三条数据'
        }, {
          number: '2016004',
          name: '小明',
          info: '这是第四条数据'
        }, {
          number: '2016005',
          name: '小明',
          info: '这是第五条数据'
        }]
      }
    }
}}

* 显示格式 [#s8a69e88]

#codeprettify{{
<el-table-column
        prop="endTime"
        label="时间"
        width="90"
        :formatter="formatDate">
</el-table-column>
}}

#codeprettify{{
methods: {
    formatDate(row, column) {
        // 获取单元格数据
        let data = row[column.property]
        if(data == null) {
            return null
        }
        let dt = new Date(data)
         return dt.getFullYear() + '/' + (dt.getMonth() + 1) + '/' + dt.getDate()
    },
}
}}

* Tips [#j0e407af]

** 设置表格全部展开 [#w3ba74ac]

element-ui 中 el-table-column 里面设置 type="expand" 可设置 table 全部展开，或者展开有数据的部分。如果想让全部展开的话添加 :default-expand-all="true"

#codeprettify{{
<el-table :default-expand-all="true">
   <el-table-column type="expand">
...
}}

** 设置有数据的行打开下拉 [#k7a291e1]

需要在table绑定两个属性
 expand-row-key="expand" 和 row-key="method" method 里面设置需要展开的行

** 超过长度显示省略号 [#w0c7798d]

#codeprettify{{
<el-table-column prop="note" label="备注">
  <template slot-scope="scope">
    <span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left">
      \{\{ scope.row.note \}\}
    </span>
  </template>
</el-table-column>
}}

- white-space:nowrap;/强制单行显示/
- text-overflow:ellipsis;/超出部分省略号表示/
- overflow:hidden;/超出部分隐藏/
- width: 120px;/设置显示的最大宽度/
- display:block;就是将元素显示为块级元素。

** expand 类型 [#v4c6dd20]

全部展开/折叠

#codeprettify{{

//按钮
<el-button size="mini" @click="btnExpand" style="margin-top: 8px">\{\{ this.isExpand ? '折叠' : '展开' \}\}</el-button>
<el-table ref="ctab"
>... 省略 ...
</el-table>

data() {
    return {
      isExpand: false,
}
method(){
    btnExpand() {
      this.actionUnfoldFunc(!this.isExpand);
    }, //btnExpand
    actionUnfoldFunc(isAss) {
      this.handleExpand(isAss);
    },
    handleExpand(isAss) {
      // 此判断是否为展开状态或折叠状态--若展开折叠是同一个按钮则无需传参和加此if
      if (this.isExpand == isAss) {
        return;
      }
      this.isExpand = !this.isExpand;
      // this.data为返回的二级数据data
      this.$nextTick(() => {
        this.forArr(this.data, this.isExpand);
      });
    }, //handleExpand
    // 遍历
    forArr(arr, isExpand) {
      arr.forEach((i) => {
        // toggleRowExpansion见element文档
        this.$refs.ctab.toggleRowExpansion(i, isExpand);
        if (i.children) {
          this.forArr(i.children, isExpand);
        }
      });
    }, //forArr
}
}}

** 动态渲染列 [#d5001095]

使用 v-for 

简单的

#codeprettify{{
<el-table style="width: 100%" border :data="tableData">
  <template v-for="(item,index) in DataList">
    <el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
  </template>
</el-table>
}}


复杂的，里面带一个 el-input 控件的

#codeprettify{{
<template v-for="(pt, index) in list">
  <el-table-column :prop="pt.Name" :label="pt.Name" :key="index">
    <template slot-scope="scope">
      <el-input v-model="scope.row[pt.Value * 1]" placeholder="请输入" />
    </template>
  </el-table-column>
</template>
}}



** 行点击事件 [#w04d110d]

配合 highlight-current-row 和 setCurrentRow 使用可以将点击的行设置为高亮

#codeprettify{{
<el-table ref="aaTable"
  @row-click="rowClick"
  v-loading="loading"
  highlight-current-row
  :data="dataList">
</el-table>
 
method:{
    rowClick(row){
      this.$refs.aaTable.setCurrentRow(row);
      console.log(row)
    },
}
}}

** 自定义空数据的插槽（未验证） [#zf6b42ea]

#codeprettify{{
<template slot="empty" v-if="slot.row.children.length == 0">
    <span>empty</span>
</template>
}}

** 自定义列头 [#e367ff91]

#codeprettify{{
<el-table-column label="数量" prop="backCount" width="100">
  <template slot-scope="scope">
    <el-input v-model="scope.row.Count" :disabled="true" oninput="value=value.replace(/[^\d]/g,'')" />
  </template>
  <template v-slot:header>
    <el-tooltip content="我是一个数量" placement="top-end" effect="dark">
      <i class="el-icon-warning-outline"></i>
    </el-tooltip>
    <span>数量</span>
  </template>
</el-table-column>
}}

#hr();
コメント：
#comment_kcaptcha