vue动态表格Table设置属性动态修改表格

<template>
  <div>
  <jButton :type="'primary'" :btnIcon="'el-icon-edit'" :disabled="!this.editArr.length>0" @click.native="edit">修改</jButton>
 <Table
        border
        id="v_tableFull"
        :maxHeight='tableFullConHeight'
        :columns="columns"
        :data="dataList"
        :total="total"
        @on-selection-change="seletTableRow""
      >
      <template slot-scope="{ row }" slot="visitDate">
          <Form :ref="'visitDate' + row.id" :model="row" class="tableDateInput">
            <FormItem
              prop="visitDate"
              :rules="{
                required: true,
                message: ' ',
                trigger: 'change',
                pattern: /.+/,
              }"
              style="margin-top:10px;"
            >
              <DatePicker
                disabled
                transfer
                type="date"
                v-model="row.visitDate"
                style="width: 100%"
                @on-change="visitDateChange(row)"
              ></DatePicker>
            </FormItem>
          </Form>
        </template>
        <template slot-scope="{ row }" slot="visit">
          <Form :ref="'visit' + row.id" :model="row" class="tableInput">
            <FormItem
              prop="visit"
              style="margin-top:10px;position:relative"
            >
              <Input
                class="input-right"
                v-model="row.visit"
                @on-blur="visitBlur(row)"
                @on-focus="toFormat(row)"
                :disabled="!row.ifExtension"
                maxlength="18"
              />
            </FormItem>
          </Form>
          <!--on-blur 输入时就动态赋值；
           on-focus 聚集焦点时，触发方法；
           on-change 选择变化时，进行赋值等；
           :disabled 根据行值确定可修改不可修改-->
</Table>
  </div>
</template>
export default {
	name: "",
	 data() {
	 return {
	  tableFullConHeight:500, // 列表的高度
	   total: 0,
	   columns: [
        {
          type: "selection",
          width: 53,
          align: "center",
        },
        {
          title: "序号",
          type: "index",
          width: 62,
          align: "center",
        },
         {
          title: "ID",
          type: "id",
          width: 62,
          align: "center",
          resizable: true, // iview属性，字段超长会变....
        },
        {
          title: "xxx",
          key: "xxx",
          align: "center",
          width: 100,
          resizable: true,
        },
        {
          title: "参考值",
          key: "visitValue",
          align: "center",
          width: 120,
          resizable: true,
        },
         
        {
          title: "参考日期",
          key: "visitDate",
          slot: "visitDate",
          align: "center",
          width: 170,
          resizable: true,
        },
        {
          title: "参考",
          key: "visit",
          slot: "vist",
          align: "center",
          width: 210,
          resizable: true,
        },
        {
          title: "操作时间",
          key: "maplTime",
          align: "center",
          width: 160,
        },
        .....
      ],
      dataList: [],
      disabled: false,
      editArr: [], // 选择想要修改的集合
	 }
	 }
  created() {
  	this.btnQuery();
  },
  mounted() {
  
  },
  methods: {
  	 visitBlur(row) {
  	 	// 对值得操作
  	 },
  	  toFormat(row) {
      // 鼠标聚焦时得操作
    },
    dataDateChange(row) {
       // 选择变化时得一系列操作
    },
    // 查询列表数据
    btnQuery() {
    this.$net
        .send({
          server:  '请求的接口',
          data: {'请求参数'},
        })
        .then((data) => {
          if (data.code === "200") {
            this.total = data.data.total;
            this.dataList = data.data.result;
            this.dataList.forEach((e,index) => {
              // 默认不修改 赋值一个新的属性
              this.$set(this.dataList[index], "ifExtension", false);
            });
          } else {
            this.$Modal.error({
              title: "错误信息",
              content: data.msg,
            });
          }
        });
    },
     //表格选择
    seletTableRow(row) {
      var edit_arr = [];
      for (let item of row) {
	      edit_arr.push({"rowno":item.rowno,
	      "id": item.id,
	      "visit":item.visit
	      })
      }
      this.editArr = edit_arr; // 修改集合
      if (row.length !== 0) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    // 编辑
    edit() {
    	for (let item of this.editArr) {
        if (this.dataList[item.rowno-1].ifExtension != 'undefined' && 
        this.dataList[item.rowno-1].ifExtension) {
        	// 可修改
          this.$set(this.dataList[item.rowno-1], "ifExtension", false);
        } else {
        	// 不可修改
          this.$set(this.dataList[item.rowno-1], "ifExtension", true);
        }
      }
      this.editArr = []
     },
  }
}

说明：

	#### 1：ifExtension查询的时候赋值，标识这行不可修改
	#### 2：选择行的时候，记录唯一值，标识选择了这行
	#### 3：编辑时，将ifExtension设置为false，:disabled放开成为可修改