iview Table上绑定Input通过render实现双向绑定数据

最新推荐文章于 2022-09-26 17:29:19 发布

youngeffort

最新推荐文章于 2022-09-26 17:29:19 发布

阅读量2.9k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/youngeffort/article/details/89447665

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html代码：

<template>
    <Table border :columns="columns" :data="data"></Table>
</template>

js代码：

<script>
export default {
  name: "Doctemplate",
  data() {
    return {
      temName: "",
      range: "-1",
      state: "-1",
      rangeList: [
        {
          value: "-1",
          label: "不限"
        }
      ],
      stateList: [
        {
          value: "-1",
          label: "不限"
        }
      ],
      columns: [
        {
          title: "模板编号",
          key: "templeCode",
          align: "center"
        },
        {
          title: "模板名称",
          key: "templeName",
          align: "center"
        },
        {
          title: "状态",
          key: "status",
          width: 100,
          align: "center",
          render: (h, params) => {
            var vm = this;
            return h("div", [
              h("i-switch", {
                props: {
                  size: "small",
                  value: params.row.status
                },
                on: {
                  "on-change"(value) {
                    //值改变时
                    //将渲染后的值重新赋值给单元格值
                    params.row.status = value;
                    vm.data[params.index] = params.row;
                  }
                }
              })
            ]);
          }
        }
      ],
      data: [],
      pageTotal: 0,
      pageNum:1,
      pageSize:10
    };
  },
  mounted() {
    
  },
  methods: {
    
  }
};
</script>