perf: optimize the code of el-table slot-scope
This commit is contained in:
		@@ -9,25 +9,25 @@
 | 
				
			|||||||
    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
 | 
					    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
 | 
				
			||||||
      <el-table :data="errorLogs" border>
 | 
					      <el-table :data="errorLogs" border>
 | 
				
			||||||
        <el-table-column label="Message">
 | 
					        <el-table-column label="Message">
 | 
				
			||||||
          <template slot-scope="scope">
 | 
					          <template slot-scope="{row}">
 | 
				
			||||||
            <div>
 | 
					            <div>
 | 
				
			||||||
              <span class="message-title">Msg:</span>
 | 
					              <span class="message-title">Msg:</span>
 | 
				
			||||||
              <el-tag type="danger">
 | 
					              <el-tag type="danger">
 | 
				
			||||||
                {{ scope.row.err.message }}
 | 
					                {{ row.err.message }}
 | 
				
			||||||
              </el-tag>
 | 
					              </el-tag>
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
            <br>
 | 
					            <br>
 | 
				
			||||||
            <div>
 | 
					            <div>
 | 
				
			||||||
              <span class="message-title" style="padding-right: 10px;">Info: </span>
 | 
					              <span class="message-title" style="padding-right: 10px;">Info: </span>
 | 
				
			||||||
              <el-tag type="warning">
 | 
					              <el-tag type="warning">
 | 
				
			||||||
                {{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}
 | 
					                {{ row.vm.$vnode.tag }} error in {{ row.info }}
 | 
				
			||||||
              </el-tag>
 | 
					              </el-tag>
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
            <br>
 | 
					            <br>
 | 
				
			||||||
            <div>
 | 
					            <div>
 | 
				
			||||||
              <span class="message-title" style="padding-right: 16px;">Url: </span>
 | 
					              <span class="message-title" style="padding-right: 16px;">Url: </span>
 | 
				
			||||||
              <el-tag type="success">
 | 
					              <el-tag type="success">
 | 
				
			||||||
                {{ scope.row.url }}
 | 
					                {{ row.url }}
 | 
				
			||||||
              </el-tag>
 | 
					              </el-tag>
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
          </template>
 | 
					          </template>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -11,9 +11,9 @@
 | 
				
			|||||||
      </template>
 | 
					      </template>
 | 
				
			||||||
    </el-table-column>
 | 
					    </el-table-column>
 | 
				
			||||||
    <el-table-column label="Status" width="100" align="center">
 | 
					    <el-table-column label="Status" width="100" align="center">
 | 
				
			||||||
      <template slot-scope="scope">
 | 
					      <template slot-scope="{row}">
 | 
				
			||||||
        <el-tag :type="scope.row.status | statusFilter">
 | 
					        <el-tag :type="row.status | statusFilter">
 | 
				
			||||||
          {{ scope.row.status }}
 | 
					          {{ row.status }}
 | 
				
			||||||
        </el-tag>
 | 
					        </el-tag>
 | 
				
			||||||
      </template>
 | 
					      </template>
 | 
				
			||||||
    </el-table-column>
 | 
					    </el-table-column>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -26,17 +26,17 @@
 | 
				
			|||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <el-table-column class-name="status-col" label="Status" width="110">
 | 
					      <el-table-column class-name="status-col" label="Status" width="110">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <el-tag :type="scope.row.status | statusFilter">
 | 
					          <el-tag :type="row.status | statusFilter">
 | 
				
			||||||
            {{ scope.row.status }}
 | 
					            {{ row.status }}
 | 
				
			||||||
          </el-tag>
 | 
					          </el-tag>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <el-table-column min-width="300px" label="Title">
 | 
					      <el-table-column min-width="300px" label="Title">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <router-link :to="'/example/edit/'+scope.row.id" class="link-type">
 | 
					          <router-link :to="'/example/edit/'+row.id" class="link-type">
 | 
				
			||||||
            <span>{{ scope.row.title }}</span>
 | 
					            <span>{{ row.title }}</span>
 | 
				
			||||||
          </router-link>
 | 
					          </router-link>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -19,9 +19,9 @@
 | 
				
			|||||||
    </el-table-column>
 | 
					    </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <el-table-column min-width="300px" label="Title">
 | 
					    <el-table-column min-width="300px" label="Title">
 | 
				
			||||||
      <template slot-scope="scope">
 | 
					      <template slot-scope="{row}">
 | 
				
			||||||
        <span>{{ scope.row.title }}</span>
 | 
					        <span>{{ row.title }}</span>
 | 
				
			||||||
        <el-tag>{{ scope.row.type }}</el-tag>
 | 
					        <el-tag>{{ row.type }}</el-tag>
 | 
				
			||||||
      </template>
 | 
					      </template>
 | 
				
			||||||
    </el-table-column>
 | 
					    </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -44,9 +44,9 @@
 | 
				
			|||||||
    </el-table-column>
 | 
					    </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <el-table-column class-name="status-col" label="Status" width="110">
 | 
					    <el-table-column class-name="status-col" label="Status" width="110">
 | 
				
			||||||
      <template slot-scope="scope">
 | 
					      <template slot-scope="{row}">
 | 
				
			||||||
        <el-tag :type="scope.row.status | statusFilter">
 | 
					        <el-tag :type="row.status | statusFilter">
 | 
				
			||||||
          {{ scope.row.status }}
 | 
					          {{ row.status }}
 | 
				
			||||||
        </el-tag>
 | 
					        </el-tag>
 | 
				
			||||||
      </template>
 | 
					      </template>
 | 
				
			||||||
    </el-table-column>
 | 
					    </el-table-column>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -46,9 +46,9 @@
 | 
				
			|||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
      <el-table-column :label="$t('table.title')" min-width="150px">
 | 
					      <el-table-column :label="$t('table.title')" min-width="150px">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.title }}</span>
 | 
					          <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
 | 
				
			||||||
          <el-tag>{{ scope.row.type | typeFilter }}</el-tag>
 | 
					          <el-tag>{{ row.type | typeFilter }}</el-tag>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
      <el-table-column :label="$t('table.author')" width="110px" align="center">
 | 
					      <el-table-column :label="$t('table.author')" width="110px" align="center">
 | 
				
			||||||
@@ -67,30 +67,30 @@
 | 
				
			|||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
      <el-table-column :label="$t('table.readings')" align="center" width="95">
 | 
					      <el-table-column :label="$t('table.readings')" align="center" width="95">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <span v-if="scope.row.pageviews" class="link-type" @click="handleFetchPv(scope.row.pageviews)">{{ scope.row.pageviews }}</span>
 | 
					          <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
 | 
				
			||||||
          <span v-else>0</span>
 | 
					          <span v-else>0</span>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
      <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
 | 
					      <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <el-tag :type="scope.row.status | statusFilter">
 | 
					          <el-tag :type="row.status | statusFilter">
 | 
				
			||||||
            {{ scope.row.status }}
 | 
					            {{ row.status }}
 | 
				
			||||||
          </el-tag>
 | 
					          </el-tag>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
 | 
					      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
 | 
					          <el-button type="primary" size="mini" @click="handleUpdate(row)">
 | 
				
			||||||
            {{ $t('table.edit') }}
 | 
					            {{ $t('table.edit') }}
 | 
				
			||||||
          </el-button>
 | 
					          </el-button>
 | 
				
			||||||
          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">
 | 
					          <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
 | 
				
			||||||
            {{ $t('table.publish') }}
 | 
					            {{ $t('table.publish') }}
 | 
				
			||||||
          </el-button>
 | 
					          </el-button>
 | 
				
			||||||
          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">
 | 
					          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
 | 
				
			||||||
            {{ $t('table.draft') }}
 | 
					            {{ $t('table.draft') }}
 | 
				
			||||||
          </el-button>
 | 
					          </el-button>
 | 
				
			||||||
          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">
 | 
					          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
 | 
				
			||||||
            {{ $t('table.delete') }}
 | 
					            {{ $t('table.delete') }}
 | 
				
			||||||
          </el-button>
 | 
					          </el-button>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -39,9 +39,9 @@
 | 
				
			|||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <el-table-column class-name="status-col" label="Status" width="110">
 | 
					      <el-table-column class-name="status-col" label="Status" width="110">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <el-tag :type="scope.row.status | statusFilter">
 | 
					          <el-tag :type="row.status | statusFilter">
 | 
				
			||||||
            {{ scope.row.status }}
 | 
					            {{ row.status }}
 | 
				
			||||||
          </el-tag>
 | 
					          </el-tag>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -26,31 +26,31 @@
 | 
				
			|||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <el-table-column class-name="status-col" label="Status" width="110">
 | 
					      <el-table-column class-name="status-col" label="Status" width="110">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <el-tag :type="scope.row.status | statusFilter">
 | 
					          <el-tag :type="row.status | statusFilter">
 | 
				
			||||||
            {{ scope.row.status }}
 | 
					            {{ row.status }}
 | 
				
			||||||
          </el-tag>
 | 
					          </el-tag>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <el-table-column min-width="300px" label="Title">
 | 
					      <el-table-column min-width="300px" label="Title">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <template v-if="scope.row.edit">
 | 
					          <template v-if="row.edit">
 | 
				
			||||||
            <el-input v-model="scope.row.title" class="edit-input" size="small" />
 | 
					            <el-input v-model="row.title" class="edit-input" size="small" />
 | 
				
			||||||
            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">
 | 
					            <el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
 | 
				
			||||||
              cancel
 | 
					              cancel
 | 
				
			||||||
            </el-button>
 | 
					            </el-button>
 | 
				
			||||||
          </template>
 | 
					          </template>
 | 
				
			||||||
          <span v-else>{{ scope.row.title }}</span>
 | 
					          <span v-else>{{ row.title }}</span>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
      </el-table-column>
 | 
					      </el-table-column>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <el-table-column align="center" label="Actions" width="120">
 | 
					      <el-table-column align="center" label="Actions" width="120">
 | 
				
			||||||
        <template slot-scope="scope">
 | 
					        <template slot-scope="{row}">
 | 
				
			||||||
          <el-button v-if="scope.row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">
 | 
					          <el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
 | 
				
			||||||
            Ok
 | 
					            Ok
 | 
				
			||||||
          </el-button>
 | 
					          </el-button>
 | 
				
			||||||
          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="scope.row.edit=!scope.row.edit">
 | 
					          <el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
 | 
				
			||||||
            Edit
 | 
					            Edit
 | 
				
			||||||
          </el-button>
 | 
					          </el-button>
 | 
				
			||||||
        </template>
 | 
					        </template>
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user