Element中el-table-column的常见问题

1,921 阅读1分钟

问题1:在el-table中后台返回的数据是Boolean时,表格会直接显示后台返回的Boolean值,而我们想要为true时为'是',false为'否'

解决问题1: 绑定formatter用来格式化内容,oaOrderDealStatus为后台返回的数据

 <el-table-column
        prop="oaOrderDealStatus"
        label="成交"
        width="180"
        :formatter="formatter"
      ></el-table-column>
      
  methods: {
   formatter(row, column) {
  return row.accountType==1 ? "工商注册" :row.accountType==2 ?  "会计培训":"";
},

问题2:querystatus有三个状态 0: 已添加 1: 未添加 2: 不可添加,通过三目运算显示 解决问题2:监听tableList,this.tableData为后台返回的所有数据,把querystatus赋值给status

 <el-table
    ref="table"
    :data="tableList"
    size="small"
    style="width: 100%"
  >
     <el-table-column prop="status" label="账户" width="180"></el-table-column>
  </el-table>
  
   computed: {
    tableList() {
      let tabel = this.tableData;
      for (let i in tabel) {
        tabel[i].status =
          tabel[i].querystatus == 0
            ? "已添加"
            : tabel[i].querystatus == 1
            ? "未添加"
            : tabel[i].querystatus == 2
            ? "不可添加"
            : "";
      }
      return tabel;
    },
  },
  

问题3:重置表单

    <el-form ref="form" :model="form" inline>
     <el-form-item>
      <el-button
        size="mini"
        type="warning"
        icon="el-icon-refresh-left"
        @click="onReset"
        >重置</el-button
      >
    </el-form-item>
  </el-form>
  
     form: {
        date: "",
        startDate: "",
        endDate: "",
        answer: "",
      },
     onReset() {
      this.$refs.form.resetFields();
    },