vue columns的处理,filters处理时间

dataIndex 文本

  {
          title: "title",
          dataIndex: "title",
        },

customRender 插槽:选择性文本

 {
          title: "sex",
          dataIndex: "sex",
          customRender: (text, row, index) => {
            switch (text) {
              case '1':
                return 'male';
              case '0':
                return 'female';
              default:
                return 'unknown';
            }
          }
        },

scopedSlots 传递

       {
          title: "operation",
          dataIndex: 'operation',
          width: "120px",
          fixed: "right",
          scopedSlots: { customRender: 'operation' }
        }
        
        

传递单个column,定义模块 slot接受的值operation

  <template slot="operation" slot-scope="record">
  <a class="edit" @click="() => do(record)">
  点击传递单行column
  </a>   
  </template>

处理时间
vue过滤器,可以用于过滤或者格式化,用{{|}}插值操作
第一个参数,默认参数为被过滤的对象

 {
          title: "处理时间",
          dataIndex: "time",
          scopedSlots: { customRender: 'time' }
        },
  <template slot="time" slot-scope="record">
          <div v-show="record.time!= 0">
            <div >{{ record.time | dealTime }}</div>
          </div>
        </template>  
 filters:{
 dealTime(time){return time;}
 }           
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 中,可以使用 `filters` 过滤器对数据进行格式化,但是它不能直接用于表格筛选。要实现表格的日期筛选,需要在表格中使用自定义筛选器。 在 Vue 中,可以使用 `Vue.filter` 方法定义一个全局过滤器。但是在这种情况下,我们需要为每个表格定义不同的筛选器,因此最好将筛选器定义为组件的局部方法。 下面是一个示例代码,其中包含一个名为 `dateFilter` 的自定义筛选器,以及一个名为 `DateTable` 的表格组件,该组件使用了 `el-date-picker` 组件来实现日期筛选: ```html <template> <div> <el-date-picker v-model="filterDate" type="date" placeholder="Select date" @change="handleFilterChange" ></el-date-picker> <el-table :data="tableData" :filters="filters"> <el-table-column prop="date" label="Date" :filters="dateFilters"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <<!-- other columns --> </el-table> </div> </template> <script> export default { data() { return { filterDate: null, tableData: [ { name: 'John', date: '2021-01-01' }, { name: 'Mary', date: '2021-01-02' }, { name: 'Bob', date: '2021-01-03' }, <!-- more data --> ], }; }, computed: { dateFilters() { const set = new Set(); this.tableData.forEach((item) => { set.add(item.date); }); return Array.from(set).map((value) => ({ text: value, value })); }, filters() { return { date: (value, row) => { if (!this.filterDate) { return true; } return value === this.filterDate; }, }; }, }, methods: { handleFilterChange() { this.$refs.table.clearFilter(); this.$refs.table.addFilter('date', this.filterDate); }, }, }; </script> ``` 在上面的代码中,我们定义了一个名为 `dateFilter` 的自定义筛选器,它将日期格式化为 `YYYY-MM-DD` 格式。然后,在表格组件中,我们使用 `el-date-picker` 组件来实现日期筛选,并在表格列中使用 `filters` 属性来指定筛选器选项。同时,我们使用 `filters` 属性为表格添加了一个名为 `date` 的筛选器,其过滤方法根据日期筛选表格数据。 最后,在 `handleFilterChange` 方法中,我们使用 `$refs` 引用表格并清除之前的筛选器,然后将新的日期筛选器应用到表格中。 这样就实现了基于日期控件的表格筛选功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值